<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>css学习总结 | 前端攻城狮ZhuoRu</title><meta name="keywords" content="css,张卓如,web,前端"><meta name="author" content="ZhuoRu"><meta name="copyright" content="ZhuoRu"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#0d0d0d"><meta name="baidu-site-verification" content="code-0ABMo98myg"><meta name="description" content="课程目标:1. 学会使用CSS选择器2. 熟记CSS样式和外观属性3. 熟练掌握CSS各种选择器4. 熟练掌握CSS各种选择器5. 熟练掌握CSS三种显示模式6. 熟练掌握CSS背景属性7. 熟练掌握CSS三大特性8. 熟练掌握CSS盒子模型9. 熟练掌握CSS浮动10.熟练掌握CSS定位11.熟练掌握CSS高级技巧强化CSS">
<meta property="og:type" content="article">
<meta property="og:title" content="css学习总结">
<meta property="og:url" content="https://zhangzhuoru.gitee.io/web/post/1038.html">
<meta property="og:site_name" content="前端攻城狮ZhuoRu">
<meta property="og:description" content="课程目标:1. 学会使用CSS选择器2. 熟记CSS样式和外观属性3. 熟练掌握CSS各种选择器4. 熟练掌握CSS各种选择器5. 熟练掌握CSS三种显示模式6. 熟练掌握CSS背景属性7. 熟练掌握CSS三大特性8. 熟练掌握CSS盒子模型9. 熟练掌握CSS浮动10.熟练掌握CSS定位11.熟练掌握CSS高级技巧强化CSS">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://zhangzhuoru.gitee.io/web/img/tab5.png">
<meta property="article:published_time" content="2022-11-26T16:31:04.698Z">
<meta property="article:modified_time" content="2020-07-01T16:27:23.000Z">
<meta property="article:author" content="ZhuoRu">
<meta property="article:tag" content="css">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://zhangzhuoru.gitee.io/web/img/tab5.png"><link rel="shortcut icon" href="/web/img/favicon.png"><link rel="canonical" href="https://zhangzhuoru.gitee.io/web/post/1038"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/web/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/web/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":500},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: ZhuoRu","link":"链接: ","source":"来源: 前端攻城狮ZhuoRu","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"top-right"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2020-07-02 00:27:23'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    })(window)</script><link rel="stylesheet" href="./css/custom.css"><link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/tzy13755126023/BLOG_SOURCE/css/function.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><svg aria-hidden="true" style="position:absolute; overflow:hidden; width:0; height:0"><symbol id="icon-sun" viewBox="0 0 1024 1024"><path d="M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z" fill="#FFB531" p-id="11345"></path><path d="M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z" fill="#030835" p-id="11346"></path></symbol><symbol id="icon-moon" viewBox="0 0 1024 1024"><path d="M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z" fill="#FFB531" p-id="11345"></path><path d="M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z" fill="#030835" p-id="11346"></path></symbol></svg><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.2"></head><body><div id="loading-box"><div class="pokeball-back"></div><div class="pokeball-loading"><div class="pokeball" id="pokeball-normal"></div><div class="pokeball" id="pokeball-great"></div><div class="pokeball" id="pokeball-ultra"></div><div class="pokeball" id="pokeball-master"></div><div class="pokeball" id="pokeball-safari"></div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="https://thirdqq.qlogo.cn/g?b=sdk&amp;nk=2276839311&amp;s=140" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/web/archives/"><div class="headline">文章</div><div class="length-num">8</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/web/tags/"><div class="headline">标签</div><div class="length-num">9</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/web/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/web/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/web/archives/"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span></a></div><div class="menus_item"><a class="site-page" href="/web/sponsorWall/"><i class="fa-fw fas fa-images"></i><span> 赞助墙</span></a></div><div class="menus_item"><a class="site-page" href="/web/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/web/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/web/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/web/other/"><i class="fa-fw fas fa-coffee"></i><span> Demo</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/web/img/tab5.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/web/">前端攻城狮ZhuoRu</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/web/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/web/archives/"><i class="fa-fw fa fa-graduation-cap"></i><span> 博文</span></a></div><div class="menus_item"><a class="site-page" href="/web/sponsorWall/"><i class="fa-fw fas fa-images"></i><span> 赞助墙</span></a></div><div class="menus_item"><a class="site-page" href="/web/comment/"><i class="fa-fw fa fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/web/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/web/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/web/other/"><i class="fa-fw fas fa-coffee"></i><span> Demo</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">css学习总结</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-11-26T16:31:04.698Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2020-07-01T16:27:23.000Z" title="更新于 2020-07-02 00:27:23">2020-07-02</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/web/categories/css/">css</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">31.7k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>107分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="css学习总结"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="CSS的发展历程"><a href="#CSS的发展历程" class="headerlink" title="CSS的发展历程"></a>CSS的发展历程</h1><p>从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。<br>随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。</p>
<h1 id="CSS-网页的美容师"><a href="#CSS-网页的美容师" class="headerlink" title="CSS 网页的美容师"></a>CSS 网页的美容师</h1><p>CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩。   </p>
<p>CSS的最大贡献就是：  让 HTML 从样式中解脱苦海，  实现了 HTML 专注去做 结构呈现。 而样式交给 CSS 后，你完全可以放心的早点洗洗睡了！</p>
<p>而且。。。。。 CSS 做的很出色，如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师，不信，你看:</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/baby.jpeg" /></p>
<p>ps:  你跟Angelababy只差了一个妆容的距离</p>
<p>有人说， 没有不漂亮的女人，只有不会打扮的女人。</p>
<p>我想说， 没有不好看的网页，只有不会CSS的前端。</p>
<h1 id="CSS初识"><a href="#CSS初识" class="headerlink" title="CSS初识"></a>CSS初识</h1><p>CSS(Cascading Style Sheets)    美化样式</p>
<p>CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。</p>
<p>CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。</p>
<h1 id="引入CSS样式表（书写位置）"><a href="#引入CSS样式表（书写位置）" class="headerlink" title="引入CSS样式表（书写位置）"></a>引入CSS样式表（书写位置）</h1><p>CSS可以写到那个位置？ 是不是一定写到html文件里面呢？</p>
<h2 id="内部样式表"><a href="#内部样式表" class="headerlink" title="内部样式表"></a>内部样式表</h2><p>内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/CSS&quot;</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">    选择器 &#123;属性<span class="number">1</span>:属性值<span class="number">1</span>; 属性<span class="number">2</span>:属性值<span class="number">2</span>; 属性<span class="number">3</span>:属性值<span class="number">3</span>;&#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。</p>
<p>type=”text/CSS”  在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。</p>
<h2 id="行内式（内联样式）"><a href="#行内式（内联样式）" class="headerlink" title="行内式（内联样式）"></a>行内式（内联样式）</h2><p>内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">标签名</span> <span class="attr">style</span>=<span class="string">&quot;属性1:属性值1; 属性2:属性值2; 属性3:属性值3;&quot;</span>&gt;</span> 内容 <span class="tag">&lt;/<span class="name">标签名</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。</p>
<h2 id="外部样式表（外链式）"><a href="#外部样式表（外链式）" class="headerlink" title="外部样式表（外链式）"></a>外部样式表（外链式）</h2><p>链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">&quot;CSS文件的路径&quot;</span>  <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>注意：  link 是个单标签哦!!!</p>
<p>该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。</span><br><span class="line">type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。</span><br><span class="line">rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。</span><br></pre></td></tr></table></figure>
<h2 id="三种样式表总结（位置）"><a href="#三种样式表总结（位置）" class="headerlink" title="三种样式表总结（位置）"></a>三种样式表总结（位置）</h2><div class="table-container">
<table>
<thead>
<tr>
<th>样式表</th>
<th>优点</th>
<th>缺点</th>
<th>使用情况</th>
<th>控制范围</th>
</tr>
</thead>
<tbody>
<tr>
<td>行内样式表</td>
<td>书写方便，权重高</td>
<td>没有实现样式和结构相分离</td>
<td>较少</td>
<td>控制一个标签（少）</td>
</tr>
<tr>
<td>内部样式表</td>
<td>部分结构和样式相分离</td>
<td>没有彻底分离</td>
<td>较多</td>
<td>控制一个页面（中）</td>
</tr>
<tr>
<td>外部样式表</td>
<td>完全实现结构和样式相分离</td>
<td>需要引入</td>
<td>最多，强烈推荐</td>
<td>控制整个站点（多）</td>
</tr>
</tbody>
</table>
</div>
<h1 id="CSS样式规则"><a href="#CSS样式规则" class="headerlink" title="CSS样式规则"></a>CSS样式规则</h1><p>使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：                                          </p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/gz.png" /></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">在上面的样式规则中:</span><br><span class="line"></span><br><span class="line">1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。</span><br><span class="line">2.属性和属性值以“键值对”的形式出现。</span><br><span class="line">3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。</span><br><span class="line">4.属性和属性值之间用英文“:”连接。</span><br><span class="line">5.多个“键值对”之间用英文“;”进行区分。</span><br><span class="line">可以用段落 和 表格的对齐的演示。</span><br></pre></td></tr></table></figure>
<h1 id="选择器（重点）"><a href="#选择器（重点）" class="headerlink" title="选择器（重点）"></a>选择器（重点）</h1><p>要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/ax.png" /></p>
<p>如上图所以，要把里面的小黄人分为2组，最快的方法怎办？  </p>
<p>很多， 比如 一只眼睛的一组，剩下的一组  </p>
<p>选择器干啥的？   选择标签用的</p>
<p>这就用到基础选择器组：</p>
<h1 id="CSS基础选择器"><a href="#CSS基础选择器" class="headerlink" title="CSS基础选择器"></a>CSS基础选择器</h1><h2 id="标签选择器（元素选择器）"><a href="#标签选择器（元素选择器）" class="headerlink" title="标签选择器（元素选择器）"></a>标签选择器（元素选择器）</h2><p>标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">标签名&#123;属性1:属性值1; 属性2:属性值2; 属性3:属性值3; &#125;  或者</span><br><span class="line">元素名&#123;属性1:属性值1; 属性2:属性值2; 属性3:属性值3; &#125;</span><br></pre></td></tr></table></figure>
<p>标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。</p>
<p>标签选择器 可以把某一类标签全部选择出来  div  span  </p>
<p>课堂案例：</p>
<p> 传智简介</p>
<h2 id="类选择器"><a href="#类选择器" class="headerlink" title="类选择器"></a>类选择器</h2><p>类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">.类名&#123;属性1:属性值1; 属性2:属性值2; 属性3:属性值3; &#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">标签调用的时候用 class=“类名”  即可。</span><br></pre></td></tr></table></figure>
<p>类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签 </p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/good.png" />小技巧：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1.长名称或词组可以使用中横线来为选择器命名。</span><br><span class="line">2.不建议使用“_”下划线来命名CSS选择器。</span><br></pre></td></tr></table></figure>
<p>​    输入的时候少按一个shift键;<br>　浏览器兼容问题 (比如使用<em>tips的选择器命名，在IE6是无效的)<br>　能良好区分JavaScript变量命名(JS变量命名是用“</em>”)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">3.不要纯数字、中文等命名， 尽量使用英文字母来表示。</span><br></pre></td></tr></table></figure>
<p>猜谜底游戏：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/midi.png" width="450" />   你猜？</p>
<p>命名规范：  见附件（Web前端开发规范手册.doc）</p>
<p>命名是我们通俗约定的，但是没有规定必须用这些常用的命名。</p>
<p>课堂案例：</p>
<p> <img src= "/web/img/loading.gif" data-lazy-src="/img/media/go.png" /></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">        <span class="selector-tag">span</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">font-size</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css">        <span class="selector-class">.blue</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">color</span>: blue;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css">        <span class="selector-class">.red</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">color</span>: red;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css">        <span class="selector-class">.orange</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">color</span>: orange;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css">        <span class="selector-class">.green</span> &#123;</span></span><br><span class="line"><span class="language-css">            <span class="attribute">color</span>: green;</span></span><br><span class="line"><span class="language-css">        &#125;</span></span><br><span class="line"><span class="language-css">    </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;blue&quot;</span>&gt;</span>G<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;red&quot;</span>&gt;</span>o<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;orange&quot;</span>&gt;</span>o<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;blue&quot;</span>&gt;</span>g<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;green&quot;</span>&gt;</span>l<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;red&quot;</span>&gt;</span>e<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="多类名选择器"><a href="#多类名选择器" class="headerlink" title="多类名选择器"></a>多类名选择器</h2><p>我们可以给标签指定多个类名，从而达到更多的选择目的。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/lei.png" /></p>
<p>注意：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。</span><br><span class="line">2. 各个类名中间用空格隔开。</span><br></pre></td></tr></table></figure>
<p>多类名选择器在后期布局比较复杂的情况下，还是较多使用的。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;pink fontWeight font20&quot;</span>&gt;</span>亚瑟<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;font20&quot;</span>&gt;</span>刘备<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;font14 pink&quot;</span>&gt;</span>安其拉<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;font14&quot;</span>&gt;</span>貂蝉<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>类名选择器 ：&lt; div    class=“nav”&gt;      这个 div 的名字 就是 nav      nav 就是  div     这个 div 也是 nav  </p>
<p>&lt;  人    class  = 刘德华     &gt;      我们想要吧div  找到     div {}      .nav {}     </p>
<h2 id="id选择器"><a href="#id选择器" class="headerlink" title="id选择器"></a>id选择器</h2><p>id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">#id名&#123;属性1:属性值1; 属性2:属性值2; 属性3:属性值3; &#125;</span><br></pre></td></tr></table></figure>
<p>该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。</p>
<p>用法基本和类选择器相同。</p>
<h2 id="id选择器和类选择器区别"><a href="#id选择器和类选择器区别" class="headerlink" title="id选择器和类选择器区别"></a>id选择器和类选择器区别</h2><p>W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。</p>
<p>类选择器（class） 好比人的名字，  是可以多次重复使用的， 比如  张伟  王伟  李伟  李娜</p>
<p>id选择器     好比人的身份证号码，  全中国是唯一的， 不得重复。 只能使用一次。</p>
<p><strong><em>id选择器和类选择器最大的不同在于 使用次数上。</em></strong></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/zfb.jpg" /></p>
<h2 id="通配符选择器"><a href="#通配符选择器" class="headerlink" title="通配符选择器"></a>通配符选择器</h2><p>通配符   选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">* &#123; 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; &#125;</span><br></pre></td></tr></table></figure>
<p>例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">0</span>;                    <span class="comment">/* 定义外边距*/</span></span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0</span>;                   <span class="comment">/* 定义内边距*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>注意：</p>
<p>  这个通配符选择器，就像我们的电影明星中的梦中情人， 想想它就好了，但是它不会和你过日子。 </p>
<h1 id="CSS字体样式属性"><a href="#CSS字体样式属性" class="headerlink" title="CSS字体样式属性"></a>CSS字体样式属性</h1><h2 id="font-size-字号大小"><a href="#font-size-字号大小" class="headerlink" title="font-size:字号大小"></a>font-size:字号大小</h2><p>font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/dd.png" /></p>
<h2 id="font-family-字体"><a href="#font-family-字体" class="headerlink" title="font-family:字体"></a>font-family:字体</h2><p>font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：</p>
<p>p{ font-family:”微软雅黑”;}</p>
<p>可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。</p>
<blockquote>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/good.png" />常用技巧：</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">1. 现在网页中普遍使用14px+。</span><br><span class="line">2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。</span><br><span class="line">3. 各种字体之间必须使用英文状态下的逗号隔开。</span><br><span class="line">4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。</span><br><span class="line">5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: &quot;Times New Roman&quot;;。</span><br><span class="line">6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。</span><br></pre></td></tr></table></figure>
<h2 id="CSS-Unicode字体"><a href="#CSS-Unicode字体" class="headerlink" title="CSS Unicode字体"></a>CSS Unicode字体</h2><p>在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。</p>
<p>方案一： 你可以使用英文来替代。 比如 font-family:”Microsoft Yahei”。</p>
<p>方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。<br>font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/shs.png" /></p>
<p>可以通过escape()  来测试属于什么字体。</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>字体名称</th>
<th>英文名称</th>
<th>Unicode 编码</th>
</tr>
</thead>
<tbody>
<tr>
<td>宋体</td>
<td>SimSun</td>
<td>\5B8B\4F53</td>
</tr>
<tr>
<td>新宋体</td>
<td>NSimSun</td>
<td>\65B0\5B8B\4F53</td>
</tr>
<tr>
<td>黑体</td>
<td>SimHei</td>
<td>\9ED1\4F53</td>
</tr>
<tr>
<td>微软雅黑</td>
<td>Microsoft YaHei</td>
<td>\5FAE\8F6F\96C5\9ED1</td>
</tr>
<tr>
<td>楷体_GB2312</td>
<td>KaiTi_GB2312</td>
<td>\6977\4F53_GB2312</td>
</tr>
<tr>
<td>隶书</td>
<td>LiSu</td>
<td>\96B6\4E66</td>
</tr>
<tr>
<td>幼园</td>
<td>YouYuan</td>
<td>\5E7C\5706</td>
</tr>
<tr>
<td>华文细黑</td>
<td>STXihei</td>
<td>\534E\6587\7EC6\9ED1</td>
</tr>
<tr>
<td>细明体</td>
<td>MingLiU</td>
<td>\7EC6\660E\4F53</td>
</tr>
<tr>
<td>新细明体</td>
<td>PMingLiU</td>
<td>\65B0\7EC6\660E\4F53</td>
</tr>
</tbody>
</table>
</div>
<p>为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体</p>
<h2 id="font-weight-字体粗细"><a href="#font-weight-字体粗细" class="headerlink" title="font-weight:字体粗细"></a>font-weight:字体粗细</h2><p>字体加粗除了用 b  和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/good.png" />小技巧： </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">数字 <span class="number">400</span> 等价于 <span class="attribute">normal</span>，而 <span class="number">700</span> 等价于 bold。  但是我们更喜欢用数字来表示。  </span><br></pre></td></tr></table></figure>
<h2 id="font-style-字体风格"><a href="#font-style-字体风格" class="headerlink" title="font-style:字体风格"></a>font-style:字体风格</h2><p>字体倾斜除了用 i  和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。</p>
<p>font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：</p>
<p>normal：默认值，浏览器会显示标准的字体样式。</p>
<p>italic：浏览器会显示斜体的字体样式。</p>
<p>oblique：浏览器会显示倾斜的字体样式。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/good.png" />小技巧： </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。</span><br></pre></td></tr></table></figure>
<h2 id="font-综合设置字体样式-重点"><a href="#font-综合设置字体样式-重点" class="headerlink" title="font:综合设置字体样式 (重点)"></a>font:综合设置字体样式 (重点)</h2><p>font属性用于对字体样式进行综合设置，其基本语法格式如下：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器&#123;<span class="attribute">font</span>: font-style  font-weight  font-size/line-height  font-family;&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。</span><br><span class="line"></span><br><span class="line">注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。</span><br></pre></td></tr></table></figure>
<h1 id="CSS外观属性"><a href="#CSS外观属性" class="headerlink" title="CSS外观属性"></a>CSS外观属性</h1><h2 id="color-文本颜色"><a href="#color-文本颜色" class="headerlink" title="color:文本颜色"></a>color:文本颜色</h2><p>color属性用于定义文本的颜色，其取值方式有如下3种：</p>
<p>1.预定义的颜色值，如red，green，blue等。</p>
<p>2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。</p>
<p>3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。</p>
<p>需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。</p>
<h2 id="line-height-行间距"><a href="#line-height-行间距" class="headerlink" title="line-height:行间距"></a>line-height:行间距</h2><p>ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px</p>
<p>一般情况下，行距比字号大7.8像素左右就可以了。</p>
<h2 id="text-align-水平对齐方式"><a href="#text-align-水平对齐方式" class="headerlink" title="text-align:水平对齐方式"></a>text-align:水平对齐方式</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：</span><br></pre></td></tr></table></figure>
<p>left：左对齐（默认值）</p>
<p>right：右对齐</p>
<p>center：居中对齐</p>
<p>是让盒子里面的内容水平居中， 而不是让盒子居中对齐</p>
<h2 id="text-indent-首行缩进"><a href="#text-indent-首行缩进" class="headerlink" title="text-indent:首行缩进"></a>text-indent:首行缩进</h2><p>text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。</p>
<p>1em 就是一个字的宽度   如果是汉字的段落， 1em 就是一个汉字的宽度</p>
<h2 id="text-decoration-文本的装饰"><a href="#text-decoration-文本的装饰" class="headerlink" title="text-decoration 文本的装饰"></a>text-decoration 文本的装饰</h2><p>text-decoration   通常我们用于给链接修改装饰效果</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>none</td>
<td>默认。定义标准的文本。</td>
</tr>
<tr>
<td>underline</td>
<td>定义文本下的一条线。下划线 也是我们链接自带的</td>
</tr>
<tr>
<td>overline</td>
<td>定义文本上的一条线。</td>
</tr>
<tr>
<td>line-through</td>
<td>定义穿过文本下的一条线。</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<h1 id="开发者工具（chrome）"><a href="#开发者工具（chrome）" class="headerlink" title="开发者工具（chrome）"></a>开发者工具（chrome）</h1><p>此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：</p>
<p>“按F12”或者是 “shift+ctrl+i”   打开 开发者工具。</p>
<p>菜单：   右击网页空白出—-查看 </p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/chrome.png" /></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/good.png" />小技巧：</p>
<ol>
<li>ctrl+滚轮 可以 放大开发者工具代码大小。</li>
<li>左边是HTML元素结构   右边是CSS样式。</li>
<li>右边CSS样式可以改动数值和颜色查看更改后效果。</li>
</ol>
<h1 id="CSS复合选择器"><a href="#CSS复合选择器" class="headerlink" title="CSS复合选择器"></a>CSS复合选择器</h1><p>复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。</p>
<h2 id="交集选择器"><a href="#交集选择器" class="headerlink" title="交集选择器"></a>交集选择器</h2><p>交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/jiao.png" /></p>
<p><strong>记忆技巧：</strong></p>
<p>交集选择器 是 并且的意思。  即…又…的意思</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">比如：   p.one   选择的是： 类名为 .one  的 段落标签。  </span><br></pre></td></tr></table></figure>
<p>用的相对来说比较少，不太建议使用。</p>
<h2 id="并集选择器"><a href="#并集选择器" class="headerlink" title="并集选择器"></a>并集选择器</h2><p>并集选择器（CSS选择器分组）是各个选择器通过<strong style="color:#f00">逗号</strong>连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/bing.png" /></p>
<p>记忆技巧：</p>
<p>并集选择器  和 的意思，  就是说，只要逗号隔开的，所有选择器都会执行后面样式。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">比如  .one, p , #test &#123;color: #F00;&#125;  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/hu.gif" />  他和他，在一起， 在一起    一起的意思</p>
<h2 id="后代选择器"><a href="#后代选择器" class="headerlink" title="后代选择器"></a>后代选择器</h2><p>后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/hou.png" /></p>
<p>子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。 </p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/li.png" /></p>
<h2 id="子元素选择器"><a href="#子元素选择器" class="headerlink" title="子元素选择器"></a>子元素选择器</h2><p>子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 &gt; 进行连接，注意，符号左右两侧各保留一个空格。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/zi1.png" /></p>
<p>白话：  这里的子 指的是 亲儿子  不包含孙子 重孙子之类。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">比如：  .demo &gt; h3 &#123;color: red;&#125;   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/san.jpg" /></p>
<h2 id="测试题"><a href="#测试题" class="headerlink" title="测试题"></a>测试题</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;nav&quot;</span>&gt;</span>    <span class="comment">&lt;!-- 主导航栏 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>公司首页<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>公司简介<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>公司产品<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">         <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>联系我们<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">		 <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">		    		<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>公司邮箱<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">		    		<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>公司电话<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">		 <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;sitenav&quot;</span>&gt;</span>    <span class="comment">&lt;!-- 侧导航栏 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;site-l&quot;</span>&gt;</span>左侧侧导航栏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;site-r&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>在不修改以上代码的前提下，完成以下任务：</p>
<ol>
<li>链接 登录 的颜色为红色,同时主导航栏里面的所有的链接改为橙色     (简单)</li>
<li>主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等)</li>
<li>主导航栏里面的一级菜单链接文字颜色为绿色。（难)</li>
</ol>
<h2 id="伪类选择器"><a href="#伪类选择器" class="headerlink" title="伪类选择器"></a>伪类选择器</h2><p>  伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。</p>
<p> 伪娘    </p>
<p>类  .one  </p>
<p>伪类 :link</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">为了和我们刚才学的类选择器相区别，  类选择器是一个点 比如 <span class="selector-class">.demo</span> &#123;&#125;   而我们的伪类 用 <span class="number">2</span>个点 就是 冒号  比如  <span class="selector-pseudo">:link</span>&#123;&#125;</span><br></pre></td></tr></table></figure>
<h3 id="链接伪类选择器"><a href="#链接伪类选择器" class="headerlink" title="链接伪类选择器"></a>链接伪类选择器</h3><ul>
<li>:link      /<em> 未访问的链接 </em>/</li>
<li>:visited   /<em> 已访问的链接 </em>/</li>
<li>:hover     /<em> 鼠标移动到链接上 </em>/</li>
<li>:active    /<em> 选定的链接 </em>/</li>
</ul>
<p>   注意写的时候，他们的顺序尽量不要颠倒  按照  lvha 的顺序。   love   hate  爱上了讨厌 记忆法    或者   lv 包包 非常 hao </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span> &#123;   <span class="comment">/* a是标签选择器  所有的链接 */</span></span><br><span class="line">			<span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">			<span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">			<span class="attribute">color</span>: gray;</span><br><span class="line">		&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;   <span class="comment">/* :hover 是链接伪类选择器 鼠标经过 */</span></span><br><span class="line">			<span class="attribute">color</span>: red; <span class="comment">/*  鼠标经过的时候，由原来的 灰色 变成了红色 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="CSS注释"><a href="#CSS注释" class="headerlink" title="CSS注释"></a>CSS注释</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">CSS规则是使用     /*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。</span><br></pre></td></tr></table></figure>
<p>   例如：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">14px</span>;                 <span class="comment">/* 所有的字体是14像素大小*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="sublime快捷方式"><a href="#sublime快捷方式" class="headerlink" title="sublime快捷方式"></a>sublime快捷方式</h1><p>sublime可以快速提高我们代码的书写方式</p>
<ol>
<li><p>生成标签 直接输入标签名 按tab键即可   比如  div   然后tab 键， 就可以生成 <div></div></p>
</li>
<li><p>如果想要生成多个相同标签  加上 <em> 就可以了 比如   div</em>3  就可以快速生成3个div</p>
</li>
<li><p>如果有父子级关系的标签，可以用 &gt;  比如   ul &gt; li就可以了</p>
</li>
<li><p>如果有兄弟关系的标签，用  +  就可以了 比如 div+p  </p>
</li>
<li><p>如果生成带有类名或者id名字的，  直接写  .demo  或者  #two   tab 键就可以了</p>
</li>
</ol>
<h1 id="标签显示模式（display）"><a href="#标签显示模式（display）" class="headerlink" title="标签显示模式（display）"></a>标签显示模式（display）</h1><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/people.png" /></p>
<p>非洲黑人：  皮肤内黑色素含量高，以吸收阳光中的紫外线，保护皮肤内部结构免遭损害，头发象羊毛一样卷曲，使每根卷发周围都有许多空隙，空隙充满空气，卷发有隔热作用。</p>
<p>欧洲白人： 生活寒带或着是说常年温度较低的地缘,加上年日照时间少，身体的黑色素沉淀比较少``所以出现皮肤、发色、瞳晕都呈现浅色</p>
<p>传智黄人：  我中间的。。。  <img src= "/web/img/loading.gif" data-lazy-src="/img/media/h.jpg" alt="" /></p>
<p>最重要的总结：  是为了更好的适应环境而完成的自然选择。 </p>
<p>同理，我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。</p>
<p>标签的类型(显示模式)</p>
<p>HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：</p>
<h2 id="块级元素-block-level"><a href="#块级元素-block-level" class="headerlink" title="块级元素(block-level)"></a>块级元素(block-level)</h2><p>每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 霸道</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">常见的块元素有&lt;h1&gt;~&lt;h6&gt;、&lt;p&gt;、&lt;div&gt;、&lt;ul&gt;、&lt;ol&gt;、&lt;li&gt;等，其中&lt;div&gt;标签是最典型的块元素。</span><br></pre></td></tr></table></figure>
<p>  <img src= "/web/img/loading.gif" data-lazy-src="/img/media/xtf.jpg" /></p>
<p>块级元素的特点：</p>
<p>（1）总是从新行开始</p>
<p>（2）高度，行高、外边距以及内边距都可以控制。</p>
<p>（3）宽度默认是容器的100%</p>
<p>（4）可以容纳内联元素和其他块元素。</p>
<h2 id="行内元素-inline-level"><a href="#行内元素-inline-level" class="headerlink" title="行内元素(inline-level)"></a>行内元素(inline-level)</h2><p>行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">常见的行内元素有&lt;a&gt;、&lt;strong&gt;、&lt;b&gt;、&lt;em&gt;、&lt;i&gt;、&lt;del&gt;、&lt;s&gt;、&lt;ins&gt;、&lt;u&gt;、&lt;span&gt;等，其中&lt;span&gt;标签最典型的行内元素。</span><br></pre></td></tr></table></figure>
<p>  <img src= "/web/img/loading.gif" data-lazy-src="/img/media/wf.jpg" />  我一样重要</p>
<p>行内元素的特点：</p>
<p>（1）和相邻行内元素在一行上。</p>
<p>（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。</p>
<p>（3）默认宽度就是它本身内容的宽度。</p>
<p>（4）行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素 ）</p>
<p>  <img src= "/web/img/loading.gif" data-lazy-src="/img/media/w.jpg" />    注意：</p>
<ol>
<li>只有 文字才 能组成段落  因此 p  里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。</li>
<li>链接里面不能再放链接。</li>
<li>a里面可以放块级元素</li>
</ol>
<h2 id="块级元素和行内元素区别"><a href="#块级元素和行内元素区别" class="headerlink" title="块级元素和行内元素区别"></a>块级元素和行内元素区别</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">块级元素的特点：</span><br><span class="line">（1）总是从新行开始</span><br><span class="line">（2）高度，行高、外边距以及内边距都可以控制。</span><br><span class="line">（3）宽度默认是容器的100%</span><br><span class="line">（4）可以容纳内联元素和其他块元素。</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">行内元素的特点：</span><br><span class="line">（1）和相邻行内元素在一行上。</span><br><span class="line">（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。</span><br><span class="line">（3）默认宽度就是它本身内容的宽度。</span><br><span class="line">（4）行内元素只能容纳文本或则其他行内元素。</span><br></pre></td></tr></table></figure>
<h2 id="行内块元素（inline-block）"><a href="#行内块元素（inline-block）" class="headerlink" title="行内块元素（inline-block）"></a>行内块元素（inline-block）</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">在行内元素中有几个特殊的标签——&lt;img /&gt;、&lt;input /&gt;、&lt;td&gt;，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。</span><br><span class="line"></span><br><span class="line">行内块元素的特点：</span><br><span class="line">（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。</span><br><span class="line">（2）默认宽度就是它本身内容的宽度。</span><br><span class="line">（3）高度，行高、外边距以及内边距都可以控制。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/lyc.jpg" width="400" /></p>
<h2 id="标签显示模式转换-display"><a href="#标签显示模式转换-display" class="headerlink" title="标签显示模式转换 display"></a>标签显示模式转换 display</h2><p>块转行内：display:inline;</p>
<p>行内转块：display:block;</p>
<p>块、行内元素转换为行内块： display: inline-block;</p>
<p>此阶段，我们只需关心这三个，其他的是我们后面的工作。</p>
<h2 id="课堂练习"><a href="#课堂练习" class="headerlink" title="课堂练习"></a>课堂练习</h2><p>1.写 三个 div  给定 100 * 100 的红色盒子     —  宽度 高度  背景色 </p>
<p>2.三个 span   也要求  150 * 150 绿色盒子 </p>
<ol>
<li>三个  a 链接   80 * 20  蓝色 盒子  要求 必须一行显示 这三个盒子</li>
<li>鼠标经过3个a链接的时候， 背景颜色变为  橙色     hover   bgc</li>
<li>导航栏案例</li>
</ol>
<h1 id="CSS书写规范"><a href="#CSS书写规范" class="headerlink" title="CSS书写规范"></a>CSS书写规范</h1><p>开始就形成良好的书写规范，是你专业化的开始。</p>
<h2 id="空格规范"><a href="#空格规范" class="headerlink" title="空格规范"></a>空格规范</h2><p>【强制】 选择器 与 { 之间必须包含空格。</p>
<p>示例： .selector { }</p>
<p>【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。</p>
<p>示例：</p>
<p>font-size: 12px;</p>
<h2 id="选择器规范"><a href="#选择器规范" class="headerlink" title="选择器规范"></a>选择器规范</h2><p>【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。</p>
<p>示例：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">/* good */</span><br><span class="line">.post,</span><br><span class="line">.page,</span><br><span class="line">.comment &#123;</span><br><span class="line">    line-height: 1.5;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">/* bad */</span><br><span class="line">.post, .page, .comment &#123;</span><br><span class="line">    line-height: 1.5;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。</p>
<p>示例：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">/* good */</span><br><span class="line">#username input &#123;&#125;</span><br><span class="line">.comment .avatar &#123;&#125;</span><br><span class="line"></span><br><span class="line">/* bad */</span><br><span class="line">.page .header .login #username input &#123;&#125;</span><br><span class="line">.comment div * &#123;&#125;</span><br></pre></td></tr></table></figure>
<h2 id="属性规范"><a href="#属性规范" class="headerlink" title="属性规范"></a>属性规范</h2><p>【强制】 属性定义必须另起一行。</p>
<p>示例：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">/* good */</span><br><span class="line">.selector &#123;</span><br><span class="line">    margin: 0;</span><br><span class="line">    padding: 0;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">/* bad */</span><br><span class="line">.selector &#123; margin: 0; padding: 0; &#125;</span><br></pre></td></tr></table></figure>
<p>【强制】 属性定义后必须以分号结尾。</p>
<p>示例：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">/* good */</span><br><span class="line">.selector &#123;</span><br><span class="line">    margin: 0;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">/* bad */</span><br><span class="line">.selector &#123;</span><br><span class="line">    margin: 0</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="行高的测量"><a href="#行高的测量" class="headerlink" title="行高的测量"></a>行高的测量</h1><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/line1.png"  /></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/line2.png"  /></p>
<p>行高我们利用最多的一个地方是： 可以让一行文本在盒子中垂直居中对齐。</p>
<p>做法就是： 文字的行高等于盒子的高度。</p>
<p>这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1.png"  /></p>
<p>上距离和下距离总是相等的，因此文字看上去是垂直居中的。</p>
<p>如果 行高 等 height 高度  文字会 垂直居中</p>
<p>如果行高 大于 高度   文字会 偏下 </p>
<p>如果行高小于高度   文字会  偏上 </p>
<h1 id="CSS-三大特性"><a href="#CSS-三大特性" class="headerlink" title="CSS 三大特性"></a>CSS 三大特性</h1><p>层叠 继承  优先级 是我们学习CSS 必须掌握的三个特性。</p>
<h2 id="CSS层叠性"><a href="#CSS层叠性" class="headerlink" title="CSS层叠性"></a>CSS层叠性</h2><p>所谓层叠性是指多种CSS样式的叠加。</p>
<p>是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉</p>
<p>比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。  就近原则</p>
<p>一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。</p>
<ol>
<li>样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。</li>
<li>样式不冲突，不会层叠</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">CSS最后的执行口诀：  长江后浪推前浪，前浪死在沙滩上。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/hai.gif"  width="600" height="400" /></p>
<h2 id="CSS继承性"><a href="#CSS继承性" class="headerlink" title="CSS继承性"></a>CSS继承性</h2><p>所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。</p>
<p>简单的理解就是：  子承父业。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">CSS最后的执行口诀：  龙生龙，凤生凤，老鼠生的孩子会打洞。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/shu.gif" /></p>
<p>注意：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）</span><br></pre></td></tr></table></figure>
<h2 id="CSS优先级"><a href="#CSS优先级" class="headerlink" title="CSS优先级"></a>CSS优先级</h2><p>定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。</p>
<p>在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。</span><br><span class="line"></span><br><span class="line">行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。</span><br><span class="line"></span><br><span class="line">权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。</span><br><span class="line"></span><br><span class="line">CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。</span><br></pre></td></tr></table></figure>
<h3 id="CSS特殊性（Specificity）"><a href="#CSS特殊性（Specificity）" class="headerlink" title="CSS特殊性（Specificity）"></a>CSS特殊性（Specificity）</h3><p>关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：</p>
<p>specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。 </p>
<div class="table-container">
<table>
<thead>
<tr>
<th>继承或者* 的贡献值</th>
<th>0,0,0,0</th>
</tr>
</thead>
<tbody>
<tr>
<td>每个元素（标签）贡献值为</td>
<td>0,0,0,1</td>
</tr>
<tr>
<td>每个类，伪类贡献值为</td>
<td>0,0,1,0</td>
</tr>
<tr>
<td>每个ID贡献值为</td>
<td>0,1,0,0</td>
</tr>
<tr>
<td>每个行内样式贡献值</td>
<td>1,0,0,0</td>
</tr>
<tr>
<td>每个!important贡献值  重要的</td>
<td>∞ 无穷大</td>
</tr>
</tbody>
</table>
</div>
<p>权重是可以叠加的</p>
<p> 比如的例子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">div ul  li   ------&gt;      0,0,0,3</span><br><span class="line"></span><br><span class="line">.nav ul li   ------&gt;      0,0,1,2</span><br><span class="line"></span><br><span class="line">a:hover      -----—&gt;      0,0,1,1</span><br><span class="line"></span><br><span class="line">.nav a       ------&gt;      0,0,1,1   </span><br><span class="line"></span><br><span class="line">#nav p       -----&gt;       0,1,0,1</span><br></pre></td></tr></table></figure>
<p>​      </p>
<p> <img src= "/web/img/loading.gif" data-lazy-src="/img/media/w.jpg" /> 注意： </p>
<p>1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。</p>
<ol>
<li>继承的 权重是 0  </li>
</ol>
<p>总结优先级：</p>
<ol>
<li>使用了 !important声明的规则。</li>
<li>内嵌在 HTML 元素的 style属性里面的声明。</li>
<li>使用了 ID 选择器的规则。</li>
<li>使用了类选择器、属性选择器、伪元素和伪类选择器的规则。</li>
<li>使用了元素选择器的规则。</li>
<li>只包含一个通用选择器的规则。</li>
<li>同一类选择器则遵循就近原则。</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">总结：权重是优先级的算法，层叠是优先级的表现</span><br></pre></td></tr></table></figure>
<h1 id="CSS-背景-background"><a href="#CSS-背景-background" class="headerlink" title="CSS 背景(background)"></a>CSS 背景(background)</h1><p>CSS 可以添加背景颜色和背景图片，以及来进行图片设置。</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>background-color</th>
<th>背景颜色</th>
</tr>
</thead>
<tbody>
<tr>
<td>background-image</td>
<td>背景图片地址</td>
</tr>
<tr>
<td>background-repeat</td>
<td>是否平铺</td>
</tr>
<tr>
<td>background-position</td>
<td>背景位置</td>
</tr>
<tr>
<td>background-attachment</td>
<td>背景固定还是滚动</td>
</tr>
<tr>
<td>背景的合写（复合属性）</td>
<td></td>
</tr>
<tr>
<td>background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置</td>
</tr>
</tbody>
</table>
</div>
<h2 id="背景图片-image"><a href="#背景图片-image" class="headerlink" title="背景图片(image)"></a>背景图片(image)</h2><p>语法： </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background-image</span> : none | url (url) </span><br></pre></td></tr></table></figure>
<p>参数： </p>
<p>none : 　无背景图（默认的）<br>url : 　使用绝对或相对地址指定背景图像 </p>
<p>background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。</p>
<p>小技巧：  我们提倡 背景图片后面的地址，url不要加引号。</p>
<h2 id="背景平铺（repeat）"><a href="#背景平铺（repeat）" class="headerlink" title="背景平铺（repeat）"></a>背景平铺（repeat）</h2><p>语法： </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background-repeat</span> : repeat | no-repeat | repeat-x | repeat-y </span><br></pre></td></tr></table></figure>
<p>参数： </p>
<p>repeat : 　背景图像在纵向和横向上平铺（默认的）</p>
<p>no-repeat : 　背景图像不平铺</p>
<p>repeat-x : 　背景图像在横向上平铺</p>
<p>repeat-y : 　背景图像在纵向平铺 </p>
<p>设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。</p>
<p>repeat-x : 　背景图像在横向上平铺  </p>
<p>repeat-y : 　背景图像在纵向平铺 </p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/y.png" width="600"/></p>
<p>设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/q.png" width="600"/></p>
<h2 id="背景位置-position"><a href="#背景位置-position" class="headerlink" title="背景位置(position)"></a>背景位置(position)</h2><p>语法： </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background-position</span> : length || length</span><br><span class="line"></span><br><span class="line">background-position : position || position </span><br></pre></td></tr></table></figure>
<p>参数： </p>
<p>length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位<br>position : 　top | center | bottom | left | center | right </p>
<p>说明： </p>
<p>设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。<br>如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。</p>
<p>注意：</p>
<ol>
<li>position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。</li>
<li>如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top;   则 15px 一定是  x坐标   top是 y坐标。</li>
</ol>
<p>实际工作用的最多的，就是背景图片居中对齐了。</p>
<h2 id="背景附着"><a href="#背景附着" class="headerlink" title="背景附着"></a>背景附着</h2><p>语法： </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background-attachment</span> : scroll | fixed </span><br></pre></td></tr></table></figure>
<p>参数： </p>
<p>scroll : 　背景图像是随对象内容滚动<br>fixed : 　背景图像固定 </p>
<p>说明： </p>
<p>设置或检索背景图像是随对象内容滚动还是固定的。</p>
<h2 id="背景简写"><a href="#背景简写" class="headerlink" title="背景简写"></a>背景简写</h2><p>background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：</p>
<p>background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background</span>: transparent <span class="built_in">url</span>(<span class="string">image.jpg</span>) repeat-y  scroll <span class="number">50%</span> <span class="number">0</span> ;</span><br></pre></td></tr></table></figure>
<h2 id="背景透明-CSS3"><a href="#背景透明-CSS3" class="headerlink" title="背景透明(CSS3)"></a>背景透明(CSS3)</h2><p>CSS3支持背景半透明的写法语法格式是:</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.3</span>);</span><br></pre></td></tr></table></figure>
<p> 最后一个参数是alpha 透明度  取值范围 0~1之间</p>
<p> 注意：  背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。</p>
<h2 id="导航栏案例"><a href="#导航栏案例" class="headerlink" title="导航栏案例"></a>导航栏案例</h2><p><strong>使用技巧</strong>：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css">		<span class="selector-tag">body</span> &#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">background-color</span>: <span class="number">#000</span>;</span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-tag">a</span> &#123;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">height</span>: <span class="number">50px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="comment">/* background-color: orange; */</span></span></span><br><span class="line"><span class="language-css">			<span class="attribute">display</span>: inline-block;  <span class="comment">/* 把a 行内元素转换为行内块元素 */</span></span></span><br><span class="line"><span class="language-css">			<span class="attribute">text-align</span>: center;  <span class="comment">/* 文字水平居中 */</span></span></span><br><span class="line"><span class="language-css">			<span class="attribute">line-height</span>: <span class="number">50px</span>;  <span class="comment">/* 我们设定行高等于盒子的高度，就可以使文字垂直居中 */</span></span></span><br><span class="line"><span class="language-css">			<span class="attribute">color</span>: <span class="number">#fff</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">font-size</span>: <span class="number">22px</span>;</span></span><br><span class="line"><span class="language-css">			<span class="attribute">text-decoration</span>: none;  <span class="comment">/* 取消下划线 文本装饰 */</span></span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">		<span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;  <span class="comment">/* 鼠标经过 给我们的链接添加背景图片*/</span></span></span><br><span class="line"><span class="language-css">			<span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">images/h.png</span>) no-repeat; </span></span><br><span class="line"><span class="language-css">		&#125;</span></span><br><span class="line"><span class="language-css">        </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>专区说明<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>申请资格<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>兑换奖励<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span>下载游戏<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="盒子模型（CSS重点）"><a href="#盒子模型（CSS重点）" class="headerlink" title="盒子模型（CSS重点）"></a>盒子模型（CSS重点）</h1><p>其实，CSS就三个大模块：  盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。  </p>
<p>所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。</p>
<h2 id="看透网页布局的本质"><a href="#看透网页布局的本质" class="headerlink" title="看透网页布局的本质"></a>看透网页布局的本质</h2><p>网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/t.png" /></p>
<p>牛奶是怎样运输，让消费者购买的呢？</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/m.jpg" /></p>
<p>我们说过，行内元素比如 文字 类似牛奶，也需要一个盒子把他们装起来，我们前面学过的双标签都是一个盒子。有了盒子，我们就可以随意的，自由的，摆放位置了。</p>
<p>看透网页布局的本质：  把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/t1.png" /></p>
<p>CSS 其实没有太多逻辑可言 ， 类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/j.jpg" width="300" /></p>
<h2 id="盒子模型（Box-Model）"><a href="#盒子模型（Box-Model）" class="headerlink" title="盒子模型（Box Model）"></a>盒子模型（Box Model）</h2><p>这里略过 老旧的ie盒子模型（IE6以下），对不起，我都没见过IE5的浏览器。 </p>
<p>首先，我们来看一张图，来体会下什么是盒子模型。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/box.png"  width="700" /></p>
<p>所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，<strong style="color: #f00;">每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。</strong></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/boxs.png"  width="700" /></p>
<h2 id="盒子边框（border）"><a href="#盒子边框（border）" class="headerlink" title="盒子边框（border）"></a>盒子边框（border）</h2><p>边框就是那层皮。  橘子皮。。柚子皮。。橙子皮。。。</p>
<p>语法： </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">border</span> : border-width || border-style || border-color </span><br></pre></td></tr></table></figure>
<p>边框属性—设置边框样式（border-style）</p>
<p>边框样式用于定义页面中边框的风格，常用属性值如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">none：没有边框即忽略所有边框的宽度（默认值）</span><br><span class="line"></span><br><span class="line">solid：边框为单实线(最为常用的)</span><br><span class="line"></span><br><span class="line">dashed：边框为虚线  </span><br><span class="line"></span><br><span class="line">dotted：边框为点线</span><br><span class="line"></span><br><span class="line">double：边框为双实线</span><br></pre></td></tr></table></figure>
<h3 id="盒子边框写法总结表"><a href="#盒子边框写法总结表" class="headerlink" title="盒子边框写法总结表"></a>盒子边框写法总结表</h3><div class="table-container">
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>设置内容</td>
<td>样式属性</td>
<td>常用属性值</td>
</tr>
<tr>
<td>上边框</td>
<td>border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>下边框</td>
<td>border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>左边框</td>
<td>border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>右边框</td>
<td>border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>样式综合设置</td>
<td>border-style:上边 [右边 下边 左边];</td>
<td>none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线</td>
</tr>
<tr>
<td>宽度综合设置</td>
<td>border-width:上边 [右边 下边 左边];</td>
<td>像素值</td>
</tr>
<tr>
<td>颜色综合设置</td>
<td>border-color:上边 [右边 下边 左边];</td>
<td>颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)</td>
</tr>
<tr>
<td>边框综合设置</td>
<td>border:四边宽度 四边样式 四边颜色;</td>
</tr>
</tbody>
</table>
</div>
<pre><code>    border-top: 1px solid red; /*上边框*/
    border-bottom: 2px solid green; /*下边框*/
    border-left: 1px solid blue;
    border-right: 5px solid pink;

    border: 1px solid red;
</code></pre><h3 id="表格的细线边框"><a href="#表格的细线边框" class="headerlink" title="表格的细线边框"></a>表格的细线边框</h3><p>以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。 让我们真的相信，CSS就是我们的白马王子（白雪公主）。</p>
<p>table{ border-collapse:collapse; }  collapse 单词是合并的意思</p>
<p>border-collapse:collapse; 表示相邻边框合并在一起。</p>
<h2 id="内边距（padding）"><a href="#内边距（padding）" class="headerlink" title="内边距（padding）"></a>内边距（padding）</h2><p>padding属性用于设置内边距。  是指 边框与内容之间的距离。</p>
<p>padding-top:上内边距</p>
<p>padding-right:右内边距</p>
<p>padding-bottom:下内边距</p>
<p>padding-left:左内边距</p>
<p> <img src= "/web/img/loading.gif" data-lazy-src="/img/media/w.jpg"/>注意：  后面跟几个数值表示的意思是不一样的。</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>值的个数</th>
<th>表达意思</th>
</tr>
</thead>
<tbody>
<tr>
<td>1个值</td>
<td>padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素</td>
</tr>
<tr>
<td>2个值</td>
<td>padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素</td>
</tr>
<tr>
<td>3个值</td>
<td>padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素</td>
</tr>
<tr>
<td>4个值</td>
<td>padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针</td>
</tr>
</tbody>
</table>
</div>
<p>课堂案例：  新浪导航</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/al.gif" /></p>
<h3 id="关于盒子宽度下列正确的是（）"><a href="#关于盒子宽度下列正确的是（）" class="headerlink" title="关于盒子宽度下列正确的是（）"></a>关于盒子宽度下列正确的是（）</h3><p>(A) 盒子宽：就是width的大小</p>
<p>(B) 盒子宽： padding-left + width + padding-right </p>
<p>(C) 盒子宽： border-left + width + border-right </p>
<p>(D) 盒子宽： border-left+ padding-left + width + padding-right + border-right</p>
<p>w 100  padding 10  border 5  ? 实际大小 ？   130 </p>
<h3 id="3关于盒子高度下列正确的是（）"><a href="#3关于盒子高度下列正确的是（）" class="headerlink" title="3关于盒子高度下列正确的是（）"></a>3关于盒子高度下列正确的是（）</h3><p>(A) 盒子高：就是height的大小</p>
<p>(B) 盒子高：padding-top +height + padding-bottom </p>
<p>(C) 盒子高：border-top + height + border-bottom</p>
<p>(D) 盒子高：border-top + padding-top +height + padding-bottom + border-bottom</p>
<p><strong>4**</strong> 关于根据下列代码计算 盒子宽高下列说法正确的是（）<strong>**</strong></p>
<p>div {</p>
<p>​            width: 200px;</p>
<p>​            height: 200px;</p>
<p>​            border: 1px solid #000000;</p>
<p>​            border-top: 5px solid blue;</p>
<p>​            padding: 50px;</p>
<p>​            padding-left: 100px;</p>
<p>​        }</p>
<p>(A) 宽度为200px 高度为200px</p>
<p>(B) 宽度为352px 高度为306px</p>
<p>(C) 宽度为302px 高度为307px</p>
<p>(D) 宽度为302px 高度为252px</p>
<h2 id="外边距（margin）"><a href="#外边距（margin）" class="headerlink" title="外边距（margin）"></a>外边距（margin）</h2><p>margin属性用于设置外边距。  设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。</p>
<p>margin-top:上外边距</p>
<p>margin-right:右外边距</p>
<p>margin-bottom:下外边距</p>
<p>margin-left:上外边距</p>
<p>margin:上外边距 右外边距  下外边距  左外边</p>
<p>取值顺序跟内边距相同。</p>
<h3 id="外边距实现盒子居中"><a href="#外边距实现盒子居中" class="headerlink" title="外边距实现盒子居中"></a>外边距实现盒子居中</h3><p>可以让一个盒子实现水平居中，需要满足一下两个条件：</p>
<ol>
<li>必须是块级元素。     </li>
<li>盒子必须指定了宽度（width）</li>
</ol>
<p>然后就给<strong>左右的外边距都设置为auto</strong>，就可使块级元素水平居中。</p>
<p>实际工作中常用这种方式进行网页布局，示例代码如下：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.header</span>&#123; <span class="attribute">width</span>:<span class="number">960px</span>; <span class="attribute">margin</span>:<span class="number">0</span> auto;&#125;</span><br></pre></td></tr></table></figure>
<h3 id="文字盒子居中图片和背景区别"><a href="#文字盒子居中图片和背景区别" class="headerlink" title="文字盒子居中图片和背景区别"></a>文字盒子居中图片和背景区别</h3><ol>
<li>文字水平居中是  text-align: center</li>
<li>盒子水平居中  左右margin 改为 auto </li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">text-align</span>: center; <span class="comment">/*  文字居中水平 */</span></span><br><span class="line"><span class="attribute">margin</span>: <span class="number">10px</span> auto;  <span class="comment">/* 盒子水平居中  左右margin 改为 auto 就阔以了 */</span></span><br></pre></td></tr></table></figure>
<ol>
<li>插入图片 我们用的最多 比如产品展示类</li>
<li>背景图片我们一般用于小图标背景 或者 超大背景图片</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">section</span> <span class="selector-tag">img</span> &#123;  </span><br><span class="line">		<span class="attribute">width</span>: <span class="number">200px</span>;<span class="comment">/* 插入图片更改大小 width 和 height */</span></span><br><span class="line">		<span class="attribute">height</span>: <span class="number">210px</span>;</span><br><span class="line">		<span class="attribute">margin-top</span>: <span class="number">30px</span>;  <span class="comment">/* 插入图片更改位置 可以用margin 或padding  盒模型 */</span></span><br><span class="line">		<span class="attribute">margin-left</span>: <span class="number">50px</span>; <span class="comment">/* 插入当图片也是一个盒子 */</span></span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">aside</span> &#123;</span><br><span class="line">		<span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">		<span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line">		<span class="attribute">border</span>: <span class="number">1px</span> solid purple;</span><br><span class="line">		<span class="attribute">background</span>: <span class="number">#fff</span> <span class="built_in">url</span>(<span class="string">images/sun.jpg</span>) no-repeat;</span><br><span class="line">	</span><br><span class="line">		<span class="attribute">background-size</span>: <span class="number">200px</span> <span class="number">210px</span>; <span class="comment">/*  背景图片更改大小只能用 background-size */</span></span><br><span class="line">		<span class="attribute">background-position</span>: <span class="number">30px</span> <span class="number">50px</span>; <span class="comment">/* 背景图片更该位置 我用 background-position */</span></span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>
<h3 id="清除元素的默认内外边距"><a href="#清除元素的默认内外边距" class="headerlink" title="清除元素的默认内外边距"></a>清除元素的默认内外边距</h3><p>为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距： </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">   <span class="attribute">padding</span>:<span class="number">0</span>;         <span class="comment">/* 清除内边距 */</span></span><br><span class="line">   <span class="attribute">margin</span>:<span class="number">0</span>;          <span class="comment">/* 清除外边距 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>注意：  行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。</p>
<p>我们尽量不要给行内元素指定上下的内外边距就好了。</p>
<h2 id="外边距合并"><a href="#外边距合并" class="headerlink" title="外边距合并"></a>外边距合并</h2><p>使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。</p>
<h3 id="相邻块元素垂直外边距的合并"><a href="#相邻块元素垂直外边距的合并" class="headerlink" title="相邻块元素垂直外边距的合并"></a>相邻块元素垂直外边距的合并</h3><p>当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/www.png" /></p>
<p>解决方案：  避免就好了。</p>
<h3 id="嵌套块元素垂直外边距的合并"><a href="#嵌套块元素垂直外边距的合并" class="headerlink" title="嵌套块元素垂直外边距的合并"></a>嵌套块元素垂直外边距的合并</h3><p>对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/n.png" /></p>
<p>解决方案：</p>
<ol>
<li>可以为父元素定义1像素的上边框或上内边距。</li>
<li>可以为父元素添加overflow:hidden。</li>
</ol>
<p>待续。。。。</p>
<h2 id="content宽度和高度"><a href="#content宽度和高度" class="headerlink" title="content宽度和高度"></a>content宽度和高度</h2><p>使用宽度属性width和高度属性height可以对盒子的大小进行控制。</p>
<p>width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。</p>
<p>大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">/*外盒尺寸计算（元素空间尺寸）*/</span><br><span class="line">Element空间高度 = content height + padding + border + margin</span><br><span class="line">Element 空间宽度 = content width + padding + border + margin</span><br><span class="line">/*内盒尺寸计算（元素实际大小）*/</span><br><span class="line">Element Height = content height + padding + border （Height为内容高度）</span><br><span class="line">Element Width = content width + padding + border （Width为内容宽度）</span><br></pre></td></tr></table></figure>
<p>注意：</p>
<p>1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。</p>
<p>2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。</p>
<p>3、<strong>如果一个盒子则会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小</strong>。</p>
<h2 id="盒子模型布局稳定性"><a href="#盒子模型布局稳定性" class="headerlink" title="盒子模型布局稳定性"></a>盒子模型布局稳定性</h2><p>开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？</p>
<p>答案是：  其实他们大部分情况下是可以混用的。  就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。</p>
<p>但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：</p>
<p>按照 优先使用  宽度 （width）  其次 使用内边距（padding）    再次  外边距（margin）。   </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">width &gt;  padding  &gt;   margin   </span><br></pre></td></tr></table></figure>
<p>原因：</p>
<ol>
<li><p>margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。</p>
</li>
<li><p>padding  会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。</p>
</li>
<li><p>width   没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。</p>
</li>
</ol>
<h2 id="圆角边框-CSS3"><a href="#圆角边框-CSS3" class="headerlink" title="圆角边框(CSS3)"></a>圆角边框(CSS3)</h2><p>从此以后，我们的世界不只有矩形。radius 半径（距离）</p>
<p>语法格式：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">border-radius</span>: <span class="number">50%</span>;   让一个正方形  变成圆圈</span><br></pre></td></tr></table></figure>
<h2 id="盒子阴影-CSS3"><a href="#盒子阴影-CSS3" class="headerlink" title="盒子阴影(CSS3)"></a>盒子阴影(CSS3)</h2><p>语法格式：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">box-shadow</span>:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498467567011.png" alt="1498467567011"></p>
<ol>
<li>前两个属性是必须写的。其余的可以省略。</li>
<li>外阴影 (outset) 但是不能写    默认      想要内阴影  inset </li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">			<span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">			<span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">			<span class="attribute">border</span>: <span class="number">10px</span> solid red;</span><br><span class="line">			<span class="comment">/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */</span></span><br><span class="line">			<span class="comment">/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */</span></span><br><span class="line">			<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">15px</span> <span class="number">30px</span>  <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, .<span class="number">4</span>);</span><br><span class="line">			</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="浮动-float"><a href="#浮动-float" class="headerlink" title="浮动(float)"></a>浮动(float)</h1><h2 id="普通流-normal-flow"><a href="#普通流-normal-flow" class="headerlink" title="普通流(normal flow)"></a>普通流(normal flow)</h2><p>这个单词很多人翻译为 文档流 ， 字面翻译  普通流 或者标准流都可以。</p>
<p>前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？  </p>
<p>CSS的定位机制有3种：普通流（标准流）、浮动和定位。</p>
<p>html语言当中另外一个相当重要的概念—————标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/t.jpg" /></p>
<h2 id="浮动-float-1"><a href="#浮动-float-1" class="headerlink" title="浮动(float)"></a>浮动(float)</h2><p>浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/l.png" style="width: 600px; border: 2px solid #000;"/></p>
<p>后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。（CSS3已经我们真正意义上的网页布局，具体CSS3我们会详细解释）</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/d.png" /></p>
<h2 id="什么是浮动？"><a href="#什么是浮动？" class="headerlink" title="什么是浮动？"></a>什么是浮动？</h2><p>元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。</p>
<p>在CSS中，通过float属性来定义浮动，其基本语法格式如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器&#123;float:属性值;&#125;</span><br></pre></td></tr></table></figure>
<div class="table-container">
<table>
<thead>
<tr>
<th>属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>left</td>
<td>元素向左浮动</td>
</tr>
<tr>
<td>right</td>
<td>元素向右浮动</td>
</tr>
<tr>
<td>none</td>
<td>元素不浮动（默认值）</td>
</tr>
</tbody>
</table>
</div>
<h2 id="浮动详细内幕特性"><a href="#浮动详细内幕特性" class="headerlink" title="浮动详细内幕特性"></a>浮动详细内幕特性</h2><p>浮动脱离标准流，====脱标==== 不占位置，会影响标准流。浮动只有左右浮动。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">1. 浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。 </span><br></pre></td></tr></table></figure>
<p>   <img src= "/web/img/loading.gif" data-lazy-src="/img/media/one.jpg" width="500" /> </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">2.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">3. 元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。</span><br></pre></td></tr></table></figure>
<p>总结：  浮动 —-&gt;    </p>
<p>浮动的目的就是为了让多个块级元素同一行上显示。  最核心的关键点就是   怎么排列的， 是否占有位置</p>
<p>float      浮 漏 特   </p>
<p>浮：    加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。<br>漏：    加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。<br>特：    特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。</p>
<h1 id="版心和布局流程"><a href="#版心和布局流程" class="headerlink" title="版心和布局流程"></a>版心和布局流程</h1><p>阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。</p>
<p>“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。</p>
<h2 id="布局流程"><a href="#布局流程" class="headerlink" title="布局流程"></a>布局流程</h2><p>为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：</p>
<p>1、确定页面的版心（可视区）。</p>
<p>2、分析页面中的行模块，以及每个行模块中的列模块。</p>
<p>3、制作HTML结构 。</p>
<p>4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。</p>
<h2 id="一列固定宽度且居中"><a href="#一列固定宽度且居中" class="headerlink" title="一列固定宽度且居中"></a>一列固定宽度且居中</h2><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/yl.jpg" width="400" /></p>
<p>最普通的，最为常用的结构</p>
<h2 id="两列左窄右宽型"><a href="#两列左窄右宽型" class="headerlink" title="两列左窄右宽型"></a>两列左窄右宽型</h2><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/ll.jpg" width="400" /></p>
<p>比如小米    <a href="http://www.mi.com" target="_blank"> 小米官网 </a></p>
<h2 id="通栏平均分布型"><a href="#通栏平均分布型" class="headerlink" title="通栏平均分布型"></a>通栏平均分布型</h2><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/tl.jpg" width="600" /></p>
<p>比如锤子    <a href="http://www.smartisan.com/" target="_blank"> 锤子官网 </a></p>
<h1 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h1><p>人生就像乘坐北京地铁一号线：</p>
<p>途经国贸，羡慕繁华；</p>
<p>途经天安门，幻想权力；</p>
<p>途经金融街，梦想发财；</p>
<p>经过公主坟，遥想华丽家族；</p>
<p>经过玉泉路，依然雄心勃勃…</p>
<p>这时，有个声音飘然入耳:乘客你好,八宝山马上就要到了！</p>
<p>顿时醒悟：人生苦短，有始有终。 </p>
<p>好比我们的浮动，有浮动开始，则就应该有浮动结束。</p>
<h2 id="为什么要清除浮动"><a href="#为什么要清除浮动" class="headerlink" title="为什么要清除浮动"></a>为什么要清除浮动</h2><p>我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现， 但是，你不能说浮动不好 <img src= "/web/img/loading.gif" data-lazy-src="/img/media/wq.jpg" height="100" />。  </p>
<p>由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。</p>
<p>准确地说，并不是清除浮动，而是<strong>清除浮动后造成的影响</strong></p>
<p>如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。</p>
<h2 id="清除浮动本质"><a href="#清除浮动本质" class="headerlink" title="清除浮动本质"></a>清除浮动本质</h2><p>清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/n.jpg" /></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/no.jpg" /></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/kc.jpg" /></p>
<h2 id="清除浮动的方法"><a href="#清除浮动的方法" class="headerlink" title="清除浮动的方法"></a>清除浮动的方法</h2><p>其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。</p>
<p>在CSS中，clear属性用于清除浮动，其基本语法格式如下：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器&#123;clear:属性值;&#125;</span><br></pre></td></tr></table></figure>
<div class="table-container">
<table>
<thead>
<tr>
<th>属性值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>left</td>
<td>不允许左侧有浮动元素（清除左侧浮动的影响）</td>
</tr>
<tr>
<td>right</td>
<td>不允许右侧有浮动元素（清除右侧浮动的影响）</td>
</tr>
<tr>
<td>both</td>
<td>同时清除左右两侧浮动的影响</td>
</tr>
</tbody>
</table>
</div>
<h3 id="额外标签法"><a href="#额外标签法" class="headerlink" title="额外标签法"></a>额外标签法</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">”clear:both”</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>，或则其他标签br等亦可。</span><br></pre></td></tr></table></figure>
<p>优点： 通俗易懂，书写方便</p>
<p>缺点： 添加许多无意义的标签，结构化较差。  我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。</p>
<h3 id="父级添加overflow属性方法"><a href="#父级添加overflow属性方法" class="headerlink" title="父级添加overflow属性方法"></a>父级添加overflow属性方法</h3><p>可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">可以给父级添加： <span class="attribute">overflow</span>为 hidden|auto|scroll  都可以实现。</span><br></pre></td></tr></table></figure>
<p>优点：  代码简洁</p>
<p>缺点：  内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。</p>
<h3 id="使用after伪元素清除浮动"><a href="#使用after伪元素清除浮动" class="headerlink" title="使用after伪元素清除浮动"></a>使用after伪元素清除浮动</h3><p><strong>:after 方式为空元素的升级版，好处是不用单独加标签了</strong> </p>
<p>使用方法：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> &#123;  <span class="attribute">content</span>: <span class="string">&quot;&quot;</span>; <span class="attribute">display</span>: block; <span class="attribute">height</span>: <span class="number">0</span>; <span class="attribute">clear</span>: both; <span class="attribute">visibility</span>: hidden;  &#125;   </span><br><span class="line"></span><br><span class="line"><span class="selector-class">.clearfix</span> &#123;*zoom: <span class="number">1</span>;&#125;   <span class="comment">/* IE6、7 专有 */</span></span><br></pre></td></tr></table></figure>
<p>优点： 符合闭合浮动思想  结构语义化正确</p>
<p>缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。</p>
<p>代表网站： 百度、淘宝网、网易等</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/163.png" style="border: 1px dashed #3c3c3c;"/></p>
<p>注意： content:”.”  里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。</p>
<h3 id="使用before和after双伪元素清除浮动"><a href="#使用before和after双伪元素清除浮动" class="headerlink" title="使用before和after双伪元素清除浮动"></a>使用before和after双伪元素清除浮动</h3><p>使用方法：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:before</span>,<span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> &#123; </span><br><span class="line">  <span class="attribute">content</span>:<span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="attribute">display</span>:table;  <span class="comment">/* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line"> <span class="attribute">clear</span>:both;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.clearfix</span> &#123;</span><br><span class="line">  *zoom:<span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>优点：  代码更简洁</p>
<p>缺点：  由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。</p>
<p>代表网站： 小米、腾讯等</p>
<h2 id="Photoshop基本使用"><a href="#Photoshop基本使用" class="headerlink" title="Photoshop基本使用"></a>Photoshop基本使用</h2><h2 id="PS界面组成："><a href="#PS界面组成：" class="headerlink" title="PS界面组成："></a>PS界面组成：</h2><p>ctrl + r  显示隐藏标尺      右击 标尺 —- 把里面的单位一律改为像素</p>
<p>ctrl+ d  取消选区    </p>
<p>菜单栏、选项栏、工具栏、浮动面板（拖拽名称，可单独操作面板）、绘图窗口<br>​    窗口菜单，可显示隐藏所有面板</p>
<p>工作区：（新建）</p>
<p>调整浮动面板</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/jiemian.png"/></p>
<h2 id="图层操作-重点"><a href="#图层操作-重点" class="headerlink" title="图层操作(重点)"></a>图层操作(重点)</h2><p> 图层面板快捷键   F7  其实图层就是一张张透明的纸  可以实现叠加问题。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/tuceng.png" /></p>
<p> 图层选择： 使用移动工具V </p>
<p> 1、图层缩览图判断</p>
<p> 2、按住CTRL,在目标图像上单击</p>
<p> 3、将光标放置在目标图像上右键，选择图层名称</p>
<p>图层面板中加选图层：</p>
<p>1、按SHIFT，单击另一目标图层     中间所有图层被选中</p>
<p>2、按CTRL，单击另一目标图层     只选中目标图层</p>
<p>复制图层：选中目标图层后（移动工具状态下）</p>
<p>   1、按ALT拖拽图像</p>
<p>   2、CTRL+J      （重合）</p>
<p>案例： 摆放一个自行车</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/bike.jpg" /></p>
<h2 id="图层编组"><a href="#图层编组" class="headerlink" title="图层编组"></a>图层编组</h2><p>选中目标图层，CTRL+G   </p>
<p>取消编组：CTRL+SHIFT+G</p>
<p>双击图层名称可重新命名</p>
<p>双击组名称，可命名组</p>
<p>  移动工具V选择组或图层时，需设置选项栏</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498465862231.png" alt="1498465862231"></p>
<h2 id="图层上下位置移动"><a href="#图层上下位置移动" class="headerlink" title="图层上下位置移动"></a>图层上下位置移动</h2><p>1、选中目标图层，在图层面拖拽</p>
<p>2、CTRL+]    向上移动图层<br>​       CTRL+[    向下移动图层</p>
<p>3、CTRL+SHIFT+]   图层置顶<br>​       CTRL+SHIFT+[   图层置底</p>
<p>移动选区或图像时：</p>
<p>移动过程中，没释放鼠标，按住SHIFT，可同一水平线、同一垂线、45度移动。</p>
<p>ps中的撤销操作是：</p>
<p>ctrl+z  撤销一步</p>
<p>ctrl+alt+z  撤销多步</p>
<h2 id="Photoshop-切图"><a href="#Photoshop-切图" class="headerlink" title="Photoshop 切图"></a>Photoshop 切图</h2><p>PS切图 可以 分为 手动 利用切片切图 以及 利用PS的插件快速切图</p>
<h3 id="切片工具"><a href="#切片工具" class="headerlink" title="切片工具"></a>切片工具</h3><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498466173246.png" alt="1498466173246"></p>
<ol>
<li><p>利用切片工具手动划出</p>
</li>
<li><p>图层菜单—-新建基于图层的切片</p>
</li>
<li><p>利用标尺   基于参考线的切片 （选择切片工具）</p>
</li>
</ol>
<p>   <img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498466734205.png" alt="1498466734205"></p>
<ol>
<li>先选个一个整个的切片，  切片选择工具— 属性面板中有 “划分”   —可以等分数平分切图</li>
</ol>
<p>导出切片： 文件— 存储为web设备所用格式</p>
<h3 id="辅助线和切片使用及清除"><a href="#辅助线和切片使用及清除" class="headerlink" title="辅助线和切片使用及清除"></a>辅助线和切片使用及清除</h3><p>视图菜单— 清除 辅助线/ 清除切片</p>
<h3 id="切图插件"><a href="#切图插件" class="headerlink" title="切图插件"></a>切图插件</h3><p>Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 “导出web所用格式” 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。</p>
<p>官网: <a target="_blank" rel="noopener" href="http://www.cutterman.cn/zh/cutterman">http://www.cutterman.cn/zh/cutterman</a></p>
<p>注意： cutterman插件要求你的ps 必须是完整版，不能是绿色版，所以大家需要从新安装完整版本。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/sample1.gif" /></p>
<h1 id="项目案例：-云道页面"><a href="#项目案例：-云道页面" class="headerlink" title="项目案例： 云道页面"></a>项目案例： 云道页面</h1><p>案例练习目的是总结以前的css和html</p>
<p>还有ps的使用。</p>
<p>制作步骤：</p>
<ol>
<li>准备相关文件。（内部样式表) html文件(index.html)   图片文件</li>
<li>准备CSS 初始化。 书写结构和样式</li>
<li>确定版心（是1200像素)和各个模块。</li>
</ol>
<h1 id="定位-position"><a href="#定位-position" class="headerlink" title="定位(position)"></a>定位(position)</h1><p>如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。</p>
<p>PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦！</p>
<h2 id="为什么要用定位？"><a href="#为什么要用定位？" class="headerlink" title="为什么要用定位？"></a>为什么要用定位？</h2><p>那么定位，最长运用的场景再那里呢？   来看几幅图片，你一定会有感悟！</p>
<p>第一幅图， 小黄色块可以再图片上移动：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1.gif" style="border: 1px dashed #3c3c3c;"/></p>
<p>第二幅图， 左右箭头压住图片：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/2.gif" style="border: 1px dashed #3c3c3c;"/></p>
<p>第三幅图,  hot 再盒子外面多出一块，更加突出：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/it.png" style="border: 1px dashed #3c3c3c;"/></p>
<p>以上三个小地方，如果用标准流或者浮动，实现会比较复杂或者难以实现，此时我们用定位来做，just soso！</p>
<h2 id="元素的定位属性"><a href="#元素的定位属性" class="headerlink" title="元素的定位属性"></a>元素的定位属性</h2><p>元素的定位属性主要包括定位模式和边偏移两部分。</p>
<p>1、边偏移</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>边偏移属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>top</td>
<td>顶端偏移量，定义元素相对于其父元素上边线的距离</td>
</tr>
<tr>
<td>bottom</td>
<td>底部偏移量，定义元素相对于其父元素下边线的距离</td>
</tr>
<tr>
<td>left</td>
<td>左侧偏移量，定义元素相对于其父元素左边线的距离</td>
</tr>
<tr>
<td>right</td>
<td>右侧偏移量，定义元素相对于其父元素右边线的距离</td>
</tr>
</tbody>
</table>
</div>
<p>也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px;  left: 30px; 等等</p>
<p>2、定位模式(定位的分类)</p>
<p>在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：</p>
<p>选择器{position:属性值;}</p>
<p>position属性的常用值</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>static</td>
<td>自动定位（默认定位方式）</td>
</tr>
<tr>
<td>relative</td>
<td>相对定位，相对于其原文档流的位置进行定位</td>
</tr>
<tr>
<td>absolute</td>
<td>绝对定位，相对于其上一个已经定位的父元素进行定位</td>
</tr>
<tr>
<td>fixed</td>
<td>固定定位，相对于浏览器窗口进行定位</td>
</tr>
</tbody>
</table>
</div>
<h2 id="静态定位-static"><a href="#静态定位-static" class="headerlink" title="静态定位(static)"></a>静态定位(static)</h2><p>静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。</p>
<p>上面的话翻译成白话：  就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。</p>
<p>在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。</p>
<p>PS： 静态定位其实没啥可说的。</p>
<h2 id="相对定位relative-自恋型"><a href="#相对定位relative-自恋型" class="headerlink" title="相对定位relative(自恋型)"></a>相对定位relative(自恋型)</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">小笑话： </span><br><span class="line">刚刚看到一个超级超级帅的帅哥，看得我都忍不住想和他搞基了。世间怎会有如此之完美的男人。我和他就这样一动不动的对视着，就仿佛一见钟情。时间也在这一瞬间停止了。直到我的手麻了。才恋恋不舍的放下镜子。。。。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/smail.gif" width="100"/></p>
<p>相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。</p>
<p>对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/r.png"  /></p>
<p>注意：   </p>
<ol>
<li>相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。</li>
<li>其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）</li>
</ol>
<p>就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）</p>
<p>如果说浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的位置上去。</p>
<h2 id="绝对定位absolute-拼爹型"><a href="#绝对定位absolute-拼爹型" class="headerlink" title="绝对定位absolute (拼爹型)"></a>绝对定位absolute (拼爹型)</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">小笑话：</span><br><span class="line"></span><br><span class="line">吃早饭时，老婆往儿子碗里放了两个煎蛋，儿子全给了我，还一本正经地说：“爸爸，多吃点，男人养家不容易。” &lt;br/&gt;</span><br><span class="line"></span><br><span class="line">我一阵感动，刚想夸他两句。 </span><br><span class="line"></span><br><span class="line">儿子接着说：“以后全靠你让我拼爹了！”</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/smail.gif" width="100"/></p>
<p>　[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。</p>
<p>当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。</p>
<p>注意：    绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。</p>
<h3 id="父级没有定位"><a href="#父级没有定位" class="headerlink" title="父级没有定位"></a>父级没有定位</h3><p>若所有父元素都没有定位，以浏览器为准对齐(document文档)。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/ab.png" /></p>
<h3 id="父级有定位"><a href="#父级有定位" class="headerlink" title="父级有定位"></a>父级有定位</h3><p>绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。 </p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/ab1.png" /></p>
<h3 id="子绝父相"><a href="#子绝父相" class="headerlink" title="子绝父相"></a>子绝父相</h3><p>这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。</p>
<p>这句话的意思是 子级是绝对定位的话， 父级要用相对定位。</p>
<p>首先， 我们说下， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。</p>
<p>就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。</p>
<p>但是，在我们网页布局的时候， 最常说的 子绝父相是怎么来的呢？ 请看如下图：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/zi.png"  style="border: 1px dashed #3c3c3c;"/></p>
<p>所以，我们可以得出如下结论：</p>
<p>因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。</p>
<p>父盒子布局时，需要占有位置，因此父亲只能是 相对定位. </p>
<p>这就是子绝父相的由来。</p>
<h2 id="绝对定位的盒子水平-垂直居中"><a href="#绝对定位的盒子水平-垂直居中" class="headerlink" title="绝对定位的盒子水平/垂直居中"></a>绝对定位的盒子水平/垂直居中</h2><p>普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了</p>
<p>定位的盒子也可以水平或者垂直居中，有一个算法。</p>
<ol>
<li><p>首先left 50%   父盒子的一半大小</p>
</li>
<li><p>然后走自己外边距负的一半值就可以了 margin-left。</p>
</li>
</ol>
<h2 id="固定定位fixed-认死理型"><a href="#固定定位fixed-认死理型" class="headerlink" title="固定定位fixed(认死理型)"></a>固定定位fixed(认死理型)</h2><p>固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。</p>
<p>当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。</p>
<p>固定定位有两点：</p>
<ol>
<li>固定定位的元素跟父亲没有任何关系，只认浏览器。</li>
<li>固定定位完全脱标，不占有位置，不随着滚动条滚动。</li>
</ol>
<p>记忆法：  就类似于孙猴子， 无父无母，好不容易找到一个可靠的师傅（浏览器），就听的师傅的，别的都不听。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/sun.jpg" width="100"></p>
<p>ie6等低版本浏览器不支持固定定位。</p>
<h2 id="叠放次序（z-index）"><a href="#叠放次序（z-index）" class="headerlink" title="叠放次序（z-index）"></a>叠放次序（z-index）</h2><p>当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/zzz.png" /></p>
<p>在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。</p>
<p>比如：  z-index: 2;</p>
<p>注意：</p>
<ol>
<li><p>z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。</p>
</li>
<li><p>如果取值相同，则根据书写顺序，后来居上。</p>
</li>
<li><p>后面数字一定不能加单位。</p>
</li>
<li><p>只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。</p>
</li>
</ol>
<h1 id="四种定位总结"><a href="#四种定位总结" class="headerlink" title="四种定位总结"></a>四种定位总结</h1><div class="table-container">
<table>
<thead>
<tr>
<th>定位模式</th>
<th>是否脱标占有位置</th>
<th>是否可以使用边偏移</th>
<th>移动位置基准</th>
</tr>
</thead>
<tbody>
<tr>
<td>静态static</td>
<td>不脱标，正常模式</td>
<td>不可以</td>
<td>正常模式</td>
</tr>
<tr>
<td>相对定位relative</td>
<td>不脱标，占有位置</td>
<td>可以</td>
<td>相对自身位置移动（自恋型）</td>
</tr>
<tr>
<td>绝对定位absolute</td>
<td>完全脱标，不占有位置</td>
<td>可以</td>
<td>相对于定位父级移动位置（拼爹型）</td>
</tr>
<tr>
<td>固定定位fixed</td>
<td>完全脱标，不占有位置</td>
<td>可以</td>
<td>相对于浏览器移动位置（认死理型）</td>
</tr>
</tbody>
</table>
</div>
<h1 id="定位模式转换"><a href="#定位模式转换" class="headerlink" title="定位模式转换"></a>定位模式转换</h1><p>跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，</p>
<p><strong> 因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。</strong></p>
<h1 id="元素的显示与隐藏"><a href="#元素的显示与隐藏" class="headerlink" title="元素的显示与隐藏"></a>元素的显示与隐藏</h1><p>在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。</p>
<p>他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！</p>
<h2 id="display-显示"><a href="#display-显示" class="headerlink" title="display 显示"></a>display 显示</h2><p>display 设置或检索对象是否及如何显示。</p>
<p>display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。</p>
<p>特点： 隐藏之后，不再保留位置。</p>
<h2 id="visibility-可见性"><a href="#visibility-可见性" class="headerlink" title="visibility 可见性"></a>visibility 可见性</h2><p>设置或检索是否显示对象。</p>
<p>visible : 　对象可视</p>
<p>hidden : 　对象隐藏</p>
<p>特点： 隐藏之后，继续保留原有位置。（停职留薪）</p>
<h2 id="overflow-溢出"><a href="#overflow-溢出" class="headerlink" title="overflow 溢出"></a>overflow 溢出</h2><p>检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。</p>
<p>visible : 　不剪切内容也不添加滚动条。</p>
<p>auto : 　 超出自动显示滚动条，不超出不显示滚动条</p>
<p>hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉</p>
<p>scroll : 　不管超出内容否，总是显示滚动条</p>
<h1 id="CSS高级技巧"><a href="#CSS高级技巧" class="headerlink" title="CSS高级技巧"></a>CSS高级技巧</h1><h2 id="CSS用户界面样式"><a href="#CSS用户界面样式" class="headerlink" title="CSS用户界面样式"></a>CSS用户界面样式</h2><p> 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽</p>
<h3 id="鼠标样式cursor"><a href="#鼠标样式cursor" class="headerlink" title="鼠标样式cursor"></a>鼠标样式cursor</h3><p> 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本</span><br></pre></td></tr></table></figure>
<p> 鼠标放我身上查看效果哦：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">&quot;cursor:default&quot;</span>&gt;</span>我是小白<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">&quot;cursor:pointer&quot;</span>&gt;</span>我是小手<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">&quot;cursor:move&quot;</span>&gt;</span>我是移动<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">&quot;cursor:text&quot;</span>&gt;</span>我是文本<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p> 尽量不要用hand  因为 火狐不支持     pointer ie6以上都支持的尽量用</p>
<h3 id="轮廓-outline"><a href="#轮廓-outline" class="headerlink" title="轮廓 outline"></a>轮廓 outline</h3><p> 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">outline</span> : outline-color ||outline-style || outline-width </span><br></pre></td></tr></table></figure>
<p> 但是我们都不关心可以设置多少，我们平时都是去掉的。</p>
<p>最直接的写法是 ：  outline: 0;   或者  outline: none;</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span>  <span class="attr">type</span>=<span class="string">&quot;text&quot;</span>  <span class="attr">style</span>=<span class="string">&quot;outline: 0;&quot;</span>/&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="防止拖拽文本域resize"><a href="#防止拖拽文本域resize" class="headerlink" title="防止拖拽文本域resize"></a>防止拖拽文本域resize</h3><p>resize：none    这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。</p>
<p>右下角可以拖拽： </p>
<textarea></textarea>

<p>右下角不可以拖拽： </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">textarea</span>  <span class="attr">style</span>=<span class="string">&quot;resize: none;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="vertical-align-垂直对齐"><a href="#vertical-align-垂直对齐" class="headerlink" title="vertical-align 垂直对齐"></a>vertical-align 垂直对齐</h2><p>以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;</p>
<p>以前我们还讲过让文字居中对齐，是 text-align: center;</p>
<p>但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。</p>
<p>vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/xian.jpg" /></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">vertical-align</span> : baseline |top |middle |bottom </span><br></pre></td></tr></table></figure>
<p>设置或检索对象内容的垂直对其方式。 </p>
<p>vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， <strong>通常用来控制图片/表单与文字的对齐</strong>。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498467742995.png" alt="1498467742995"></p>
<h3 id="图片、表单和文字对齐"><a href="#图片、表单和文字对齐" class="headerlink" title="图片、表单和文字对齐"></a>图片、表单和文字对齐</h3><p>所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。</p>
<h3 id="去除图片底侧空白缝隙"><a href="#去除图片底侧空白缝隙" class="headerlink" title="去除图片底侧空白缝隙"></a>去除图片底侧空白缝隙</h3><p>有个很重要特性你要记住： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/3.jpg" /></p>
<p>解决的方法就是：  </p>
<ol>
<li>给img vertical-align:middle | top等等。  让图片不要和基线对齐。<img src= "/web/img/loading.gif" data-lazy-src="/img/media/1633.png"  width="500"  style="border: 1px dashed #ccc;" /></li>
</ol>
<ol>
<li>给img 添加 display：block; 转换为块级元素就不会存在问题了。<img src= "/web/img/loading.gif" data-lazy-src="/img/media/sina1.png" width="500" style="border: 1px dashed #ccc;"/></li>
</ol>
<h1 id="溢出的文字隐藏"><a href="#溢出的文字隐藏" class="headerlink" title="溢出的文字隐藏"></a>溢出的文字隐藏</h1><h2 id="word-break-自动换行"><a href="#word-break-自动换行" class="headerlink" title="word-break:自动换行"></a>word-break:自动换行</h2><p>normal   使用浏览器默认的换行规则。</p>
<p>break-all   允许在单词内换行。</p>
<p>keep-all    只能在半角空格或连字符处换行。</p>
<p>主要处理英文单词</p>
<h2 id="white-space"><a href="#white-space" class="headerlink" title="white-space"></a>white-space</h2><p>white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容 </p>
<p>normal : 　默认处理方式<br>nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。</p>
<p>可以处理中文</p>
<h2 id="text-overflow-文字溢出"><a href="#text-overflow-文字溢出" class="headerlink" title="text-overflow 文字溢出"></a>text-overflow 文字溢出</h2><p>text-overflow : clip | ellipsis</p>
<p>设置或检索是否使用一个省略标记（…）标示对象内文本的溢出</p>
<p>clip : 　不显示省略标记（…），而是简单的裁切 </p>
<p>ellipsis : 　当对象内文本溢出时显示省略标记（…）</p>
<p>注意一定要首先强制一行内显示，再次和overflow属性  搭配使用</p>
<h1 id="CSS精灵技术（sprite）-小妖精-雪碧"><a href="#CSS精灵技术（sprite）-小妖精-雪碧" class="headerlink" title="CSS精灵技术（sprite） 小妖精  雪碧"></a>CSS精灵技术（sprite） 小妖精  雪碧</h1><h2 id="精灵技术产生的背景"><a href="#精灵技术产生的背景" class="headerlink" title="精灵技术产生的背景"></a>精灵技术产生的背景</h2><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/sss.png" /></p>
<p>图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。</p>
<p>然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。</p>
<h3 id="精灵技术本质"><a href="#精灵技术本质" class="headerlink" title="精灵技术本质"></a>精灵技术本质</h3><p>简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为京东网站中的一个精灵图。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/jds.png"  style="border: 1px dashed #ccc;" /></p>
<h3 id="精灵技术的使用"><a href="#精灵技术的使用" class="headerlink" title="精灵技术的使用"></a>精灵技术的使用</h3><p>CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。</p>
<h3 id="制作精灵图"><a href="#制作精灵图" class="headerlink" title="制作精灵图"></a>制作精灵图</h3><p>CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。</p>
<p>大部分情况下，精灵图都是网页美工做。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。</span><br><span class="line">我们精灵图的宽度取决于最宽的那个背景。 </span><br><span class="line">我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。</span><br><span class="line">在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。</span><br></pre></td></tr></table></figure>
<p>结束语：   小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。</p>
<h1 id="滑动门"><a href="#滑动门" class="headerlink" title="滑动门"></a>滑动门</h1><p>先来体会下现实中的滑动门,或者你可以叫做推拉门：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/h.gif" /></p>
<h2 id="滑动门出现的背景"><a href="#滑动门出现的背景" class="headerlink" title="滑动门出现的背景"></a>滑动门出现的背景</h2><p>制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/wxx.jpg" /></p>
<p>为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。</p>
<h2 id="核心技术"><a href="#核心技术" class="headerlink" title="核心技术"></a>核心技术</h2><p>核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。</p>
<p>一般的经典布局都是这样的：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>导航栏内容<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>总结： </p>
<ol>
<li>a 设置 背景左侧，padding撑开合适宽度。    </li>
<li>span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。</li>
<li>之所以a包含span就是因为 整个导航都是可以点击的。</li>
</ol>
<h1 id="学成在线综合案例"><a href="#学成在线综合案例" class="headerlink" title="学成在线综合案例"></a>学成在线综合案例</h1><h1 id="字体图标"><a href="#字体图标" class="headerlink" title="字体图标"></a>字体图标</h1><p>图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的”http请求”，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新”宠幸”啦。。 这就是字体图标（iconfont).</p>
<h2 id="字体图标优点"><a href="#字体图标优点" class="headerlink" title="字体图标优点"></a>字体图标优点</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..</span><br><span class="line">但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...</span><br><span class="line">本身体积更小，但携带的信息并没有削减。</span><br><span class="line">几乎支持所有的浏览器</span><br><span class="line">移动端设备必备良药...</span><br></pre></td></tr></table></figure>
<h2 id="字体图标使用流程"><a href="#字体图标使用流程" class="headerlink" title="字体图标使用流程"></a>字体图标使用流程</h2><p>总体来说，字体图标按照如下流程：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/fontt.png" /></p>
<h3 id="设计字体图标"><a href="#设计字体图标" class="headerlink" title="设计字体图标"></a>设计字体图标</h3><p>假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作， 他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标， 比如下图：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/03.jpg" /></p>
<p>  之后保存为svg格式，然后给我们前端人员就好了。 </p>
<p>  其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。</p>
<h3 id="上传生成字体包"><a href="#上传生成字体包" class="headerlink" title="上传生成字体包"></a>上传生成字体包</h3><p>   当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。</p>
<p>​    推荐网站： <a target="_blank" rel="noopener" href="http://icomoon.io">http://icomoon.io</a></p>
<p><strong>icomoon字库</strong></p>
<p>IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。</p>
<p>   推荐网站： <a target="_blank" rel="noopener" href="http://www.iconfont.cn/">http://www.iconfont.cn/</a></p>
<p><strong>阿里icon font字库</strong></p>
<p><a target="_blank" rel="noopener" href="http://www.iconfont.cn/">http://www.iconfont.cn/</a></p>
<p>这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！</p>
<p><strong>fontello</strong></p>
<p><a target="_blank" rel="noopener" href="http://fontello.com/">http://fontello.com/</a></p>
<p>在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。</p>
<p><strong>Font-Awesome</strong></p>
<p><a target="_blank" rel="noopener" href="http://fortawesome.github.io/Font-Awesome/">http://fortawesome.github.io/Font-Awesome/</a></p>
<p>这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。</p>
<p><strong>Glyphicon Halflings</strong></p>
<p><a target="_blank" rel="noopener" href="http://glyphicons.com/">http://glyphicons.com/</a></p>
<p>这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。</p>
<p><strong>Icons8</strong></p>
<p><a target="_blank" rel="noopener" href="https://icons8.com/">https://icons8.com/</a></p>
<p>提供PNG免费下载，像素大能到500PX</p>
<h3 id="下载兼容字体包"><a href="#下载兼容字体包" class="headerlink" title="下载兼容字体包"></a>下载兼容字体包</h3><p>刚才上传完毕， 网站会给我们把UI做的svg图片转换为我们的字体格式， 然后下载下来就好了</p>
<p>当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了， 直接到刚才的网站上找喜欢的下载使用吧。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/fontt1.png" /></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/fontt2.png" /></p>
<h3 id="字体引入到HTML"><a href="#字体引入到HTML" class="headerlink" title="字体引入到HTML"></a>字体引入到HTML</h3><p>得到压缩包之后，最后一步，是最重要的一步了， 就是字体文件已经有了，我们需要引入到我们页面中。</p>
<ol>
<li><p>首先把 以下4个文件放入到 fonts文件夹里面。 通俗的做法</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498032122244.png" alt="1498032122244"></p>
<h5 id="第一步：在样式里面声明字体：-告诉别人我们自己定义的字体"><a href="#第一步：在样式里面声明字体：-告诉别人我们自己定义的字体" class="headerlink" title="第一步：在样式里面声明字体： 告诉别人我们自己定义的字体"></a>第一步：在样式里面声明字体： 告诉别人我们自己定义的字体</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&#x27;icomoon&#x27;</span>;</span><br><span class="line">  <span class="attribute">src</span>:  <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.eot?7kkyc2&#x27;</span>);</span><br><span class="line">  <span class="attribute">src</span>:  <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.eot?7kkyc2#iefix&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;embedded-opentype&#x27;</span>),</span><br><span class="line">    <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.ttf?7kkyc2&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;truetype&#x27;</span>),</span><br><span class="line">    <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.woff?7kkyc2&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff&#x27;</span>),</span><br><span class="line">    <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.svg?7kkyc2#icomoon&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;svg&#x27;</span>);</span><br><span class="line">  <span class="attribute">font-weight</span>: normal;</span><br><span class="line">  <span class="attribute">font-style</span>: normal;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="第二步：给盒子使用字体"><a href="#第二步：给盒子使用字体" class="headerlink" title="第二步：给盒子使用字体"></a>第二步：给盒子使用字体</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">span</span> &#123;</span><br><span class="line">		<span class="attribute">font-family</span>: <span class="string">&quot;icomoon&quot;</span>;</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>
<h5 id="第三步：盒子里面添加结构"><a href="#第三步：盒子里面添加结构" class="headerlink" title="第三步：盒子里面添加结构"></a>第三步：盒子里面添加结构</h5><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">span</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">		 <span class="attribute">content</span>: <span class="string">&quot;\e900&quot;</span>;</span><br><span class="line">	&#125;</span><br><span class="line">或者  </span><br><span class="line">&lt;<span class="selector-tag">span</span>&gt;&lt;/<span class="selector-tag">span</span>&gt;  </span><br></pre></td></tr></table></figure>
<h3 id="追加新图标到原来库里面"><a href="#追加新图标到原来库里面" class="headerlink" title="追加新图标到原来库里面"></a>追加新图标到原来库里面</h3><p>如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做</p>
<p>把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/fontt5.png" /></p>
</li>
</ol>
<h2 id=""><a href="#" class="headerlink" title=" "></a> </h2><h1 id="京东项目-一"><a href="#京东项目-一" class="headerlink" title="京东项目(一)"></a>京东项目(一)</h1><h2 id="京东项目介绍"><a href="#京东项目介绍" class="headerlink" title="京东项目介绍"></a>京东项目介绍</h2><p>项目名称：京东网<br>项目描述：京东首页公共部分的头部和尾部制作，京东首页中间部分。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/jd.png" /></p>
<h2 id="项目背景"><a href="#项目背景" class="headerlink" title="项目背景"></a>项目背景</h2><p>现阶段电商类网站很流行，很多同学毕业之后会进入电商类企业工作，同时电商类网站需要的技术也是较为复杂的，这里用京东电商网站复习、总结、提高前面所学布局技术。其实，最主要的原因还是，为啥写京东？  因为刘强东，赚了我们的钱，抢了我们的女神， 我们也要学刘强东，赚别人的钱，抢别人..额，自己的女神。。。</p>
<h2 id="设计目标"><a href="#设计目标" class="headerlink" title="设计目标"></a>设计目标</h2><ul>
<li>保证浏览器 ie7及以上, 火狐, 360, safari，chrome等。谁让我再测ie6，就跟谁急。。</li>
<li>熟悉CSS+DIV布局，页面的搭建工作</li>
<li>了解常用电商类网站的布局模式</li>
<li>为后期京东移动端做铺垫</li>
</ul>
<h2 id="几点思考"><a href="#几点思考" class="headerlink" title="几点思考"></a>几点思考</h2><p>(1). 开发工具  sublime  、fireworks（ps）、各种浏览器(ie6.7 要测看心情)</p>
<p>(2). CSS Rest 类库,为跨浏览器兼容做准备(也可以直接运用jd网站的初始化)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">normalize.css   只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。 你值得拥有。。 </span><br><span class="line"></span><br><span class="line">- 保护有用的浏览器默认样式而不是完全去掉它们</span><br><span class="line"></span><br><span class="line">- 一般化的样式：为大部分HTML元素提供</span><br><span class="line"></span><br><span class="line">- 修复浏览器自身的bug并保证各浏览器的一致性</span><br><span class="line"></span><br><span class="line">- 优化CSS可用性：用一些小技巧</span><br><span class="line"></span><br><span class="line">- 解释代码：用注释和详细的文档来</span><br></pre></td></tr></table></figure>
<p>(3). 技术栈</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">HTML5 结构 + CSS3  布局 (因为我们就会这些。。。嘻嘻)</span><br></pre></td></tr></table></figure>
<p>(4). 低版本浏览器 单独制作一个跳转页面 (都是孩子，也舍不得打，舍不得扔)</p>
<p><a target="_blank" rel="noopener" href="https://h5.m.jd.com/dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html">https://h5.m.jd.com/dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html</a></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/di.png" width="600" /></p>
<h2 id="目录说明"><a href="#目录说明" class="headerlink" title="目录说明"></a>目录说明</h2><p>要实现结构和样式相分离的设计思想。 根目录下有这4个文件（目录）。</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>css</td>
<td>用于存放CSS文件</td>
</tr>
<tr>
<td>images</td>
<td>用于存放图片</td>
</tr>
<tr>
<td>index</td>
<td>京东首页 HTML</td>
</tr>
<tr>
<td>js</td>
<td>用于后期存放javascript文件</td>
</tr>
</tbody>
</table>
</div>
<h2 id="运用知识点"><a href="#运用知识点" class="headerlink" title="运用知识点"></a>运用知识点</h2><h3 id="引入ico图标"><a href="#引入ico图标" class="headerlink" title="引入ico图标"></a>引入ico图标</h3><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/ico.png"  style="border: 1px dashed #ccc; padding:3px;" />  </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">代码：  &lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot;  type=&quot;image/x-icon&quot;/&gt;     </span><br></pre></td></tr></table></figure>
<p>注意： </p>
<ol>
<li><p>她(它)不是iconfont字体哦。</p>
</li>
<li><p>位置是放到 head 标签中间。</p>
</li>
<li><p>后面的type=”image/x-icon”  属性可以省略。（我相信你也愿意省略。）</p>
</li>
<li><p>为了兼容性，请将favicon.ico 这个图标放到根目录下。（我们就不要任性了，听话放位置，省很多麻烦。。你好，我也好）</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/icotu.png" /></p>
</li>
</ol>
<h3 id="转换ico图标"><a href="#转换ico图标" class="headerlink" title="转换ico图标"></a>转换ico图标</h3><p>我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。 <a target="_blank" rel="noopener" href="http://www.bitbug.net/">http://www.bitbug.net/</a></p>
<h3 id="网站优化三大标签"><a href="#网站优化三大标签" class="headerlink" title="网站优化三大标签"></a>网站优化三大标签</h3><p>SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来。  </p>
<p> 我们现在阶段主要进行站内优化。网站优化，我们应该要懂。。。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/san.png" /></p>
<h4 id="网页title-标题"><a href="#网页title-标题" class="headerlink" title="网页title 标题"></a>网页title 标题</h4><p>title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/title.png" width="500" /></p>
<p>建议：</p>
<p>首页标题：网站名（产品名）- 网站的介绍    </p>
<p>例如：</p>
<p>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</p>
<p>小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站</p>
<h4 id="Description-网站说明"><a href="#Description-网站说明" class="headerlink" title="Description  网站说明"></a>Description  网站说明</h4><p>对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”。 就是简要说明我们网站的主要做什么的。<br>我们提倡，Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句。</p>
<p>京东网：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta name=&quot;description&quot; content=&quot;京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!&quot; /&gt;</span><br></pre></td></tr></table></figure>
<p>注意点：</p>
<ol>
<li>描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击。</li>
<li>同样遵循简短原则，字符数含空格在内不要超过 120  个汉字。</li>
<li>补充在 title  和 keywords  中未能充分表述的说明.</li>
<li>用英文逗号 关键词1,关键词2</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta name=&quot;description&quot; content=&quot;小米商城直营小米公司旗下所有产品，囊括小米手机系列小米MIX、小米Note 2，红米手机系列红米Note 4、红米4，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。&quot; /&gt;</span><br></pre></td></tr></table></figure>
<h4 id="Keywords-关键字"><a href="#Keywords-关键字" class="headerlink" title="Keywords 关键字"></a>Keywords 关键字</h4><p>Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词左右，电商类网站可以多 少许。</p>
<p>京东网：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta name=&quot;Keywords&quot; content=&quot;网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东&quot; /&gt;</span><br></pre></td></tr></table></figure>
<p>小米网：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta name=&quot;keywords&quot; content=&quot;小米,小米6,红米Note4,小米MIX,小米商城&quot; /&gt;</span><br></pre></td></tr></table></figure>
<h2 id="顶部（快捷菜单）所用知识点"><a href="#顶部（快捷菜单）所用知识点" class="headerlink" title="顶部（快捷菜单）所用知识点"></a>顶部（快捷菜单）所用知识点</h2><div class="table-container">
<table>
<thead>
<tr>
<th>知识点</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>通栏的盒子</td>
<td>不用给宽度  默认为 100% &nbsp;但是加了浮动和定位的盒子需要 添加 100%</td>
</tr>
<tr>
<td>盒子居中对齐</td>
<td>margin: auto;  注意必须有宽度的块级元素，文字水平居中对齐是 text-align:center;</td>
</tr>
<tr>
<td>行高会继承</td>
<td>文字性质的，比如 颜色、文字大小、字体、行高等会继承父级元素</td>
</tr>
<tr>
<td>浮动元素、固定定位，绝对定位会模式转换</td>
<td>具有行内块特性，比如一行放多个，有高度和宽度，如果没有指定宽度，则会根据内容多少撑开。</td>
</tr>
</tbody>
</table>
</div>
<h2 id="logo-和搜索-header-区域所用知识点"><a href="#logo-和搜索-header-区域所用知识点" class="headerlink" title="logo 和搜索 header 区域所用知识点"></a>logo 和搜索 header 区域所用知识点</h2><h3 id="网页布局稳定性"><a href="#网页布局稳定性" class="headerlink" title="网页布局稳定性"></a>网页布局稳定性</h3><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/x.png" /></p>
<h3 id="宽度剩余法："><a href="#宽度剩余法：" class="headerlink" title="宽度剩余法："></a>宽度剩余法：</h3><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/w.png" /></p>
<div class="table-container">
<table>
<thead>
<tr>
<th>知识点</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>浮动元素特性</td>
<td>1. 浮动可以让多个元素同一行显示 2. 浮动的元素是顶部对齐</td>
</tr>
<tr>
<td>logo优化</td>
<td>text-indent: -20000px; 隐藏文字， 背景图片</td>
</tr>
<tr>
<td>清除浮动</td>
<td>清除浮动的目的就是为了解决父亲高度为0的问题</td>
</tr>
<tr>
<td>鼠标样式</td>
<td>cursor: pointer;           小手      cursor: move;            四角箭头     cursor: text;  插入光标     cursor: default;  小白</td>
</tr>
<tr>
<td>不允许换行</td>
<td>white-space: nowrap;</td>
</tr>
</tbody>
</table>
</div>
<h2 id="nav导航栏所用知识点"><a href="#nav导航栏所用知识点" class="headerlink" title="nav导航栏所用知识点"></a>nav导航栏所用知识点</h2><div class="table-container">
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>边框底侧</td>
<td>border-bottom: 2px solid #ccc;</td>
</tr>
<tr>
<td>定位重点</td>
<td>绝对定位不占位置  相对定位占有位置</td>
</tr>
<tr>
<td>标签语义化dl</td>
<td>dl也是块级元素 dt 是 定义标题  dd 是定义描述，dd是围绕这dt来描述的，也就是说，dd算是dt 的解释说明详细分解。</td>
</tr>
<tr>
<td>标题标签h</td>
<td>尽量少用h1，可以多用h2和h3等标签</td>
</tr>
</tbody>
</table>
</div>
<h2 id="页面底部所用知识点"><a href="#页面底部所用知识点" class="headerlink" title="页面底部所用知识点"></a>页面底部所用知识点</h2><div class="table-container">
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>绝对定位的盒子居中对齐</td>
<td>盒子 left 50%  然后通过 margin 负值自己的宽度一半（固定定位也是如此）</td>
</tr>
</tbody>
</table>
</div>
<h3 id="固定定位的盒子靠近版心右侧对齐"><a href="#固定定位的盒子靠近版心右侧对齐" class="headerlink" title="固定定位的盒子靠近版心右侧对齐"></a>固定定位的盒子靠近版心右侧对齐</h3><p>跟绝对定位的盒子居中对齐原理差不多。</p>
<p>left 50%   然后 margin-left  版心宽度一半。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/guding.png" width="500" /></p>
<p>学习目标:</p>
<ul>
<li><p>掌握京东中间部分制作</p>
</li>
<li><p>理解BFC使用</p>
</li>
<li><p>了解优雅降级和渐进增强</p>
</li>
<li><p>了解CSS压缩和验证工具</p>
<p>typora-copy-images-to: /img/media</p>
</li>
</ul>
<hr>
<h1 id="京东项目-二"><a href="#京东项目-二" class="headerlink" title="京东项目(二)"></a>京东项目(二)</h1><h2 id="nav导航栏所用知识点-1"><a href="#nav导航栏所用知识点-1" class="headerlink" title="nav导航栏所用知识点"></a>nav导航栏所用知识点</h2><div class="table-container">
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>边框底侧</td>
<td>border-bottom: 2px solid #ccc;</td>
</tr>
<tr>
<td>定位重点</td>
<td>绝对定位不占位置  相对定位占有位置</td>
</tr>
<tr>
<td>标签语义化dl</td>
<td>dl也是块级元素 dt 是 定义标题  dd 是定义描述，dd是围绕这dt来描述的，也就是说，dd算是dt 的解释说明详细分解。</td>
</tr>
<tr>
<td>标题标签h</td>
<td>尽量少用h1，可以多用h2和h3等标签</td>
</tr>
</tbody>
</table>
</div>
<h3 id="固定定位的盒子靠近版心右侧对齐-1"><a href="#固定定位的盒子靠近版心右侧对齐-1" class="headerlink" title="固定定位的盒子靠近版心右侧对齐"></a>固定定位的盒子靠近版心右侧对齐</h3><p>跟绝对定位的盒子居中对齐原理差不多。</p>
<p>left 50%   然后 margin-left  版心宽度一半。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/guding.png" width="500" /></p>
<h2 id="焦点图部分所用知识点"><a href="#焦点图部分所用知识点" class="headerlink" title="焦点图部分所用知识点"></a>焦点图部分所用知识点</h2><div class="table-container">
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>圆角矩形</td>
<td>border-radius: 左上角 右上角 右下角  左下角。</td>
</tr>
</tbody>
</table>
</div>
<p>负值自己的宽度一半（固定定位也是如此）</p>
<h2 id="背景半透明"><a href="#背景半透明" class="headerlink" title="背景半透明"></a>背景半透明</h2><p>1.强烈推荐：  background: rgba(r,g,b,alpha);</p>
<p>​     r,g,b 是红绿蓝的颜色，  alpha 是透明度的意思，取值范围是 0~1 之间。</p>
<p>2.了解ie低版本浏览器 半透明</p>
<p>filter:Alpha(opacity=50) ；   // opacity值为0 到 100</p>
<p>但是 此属性是盒子半透明，不是背景半透明哦，因为里面的内容也一起半透明了</p>
<p>因此，低版本的 ie6.7浏览器，我们不需要透明了，直接采用优雅降级的做法。</p>
<p>background: gary;</p>
<p>background: rgba(0,0,0,.2);</p>
<p>写上两句 背景， 低版本ie只执行gray， 其他浏览器执行 半透明下面这一句。</p>
<h2 id="BFC-块级格式化上下文"><a href="#BFC-块级格式化上下文" class="headerlink" title="BFC(块级格式化上下文)"></a>BFC(块级格式化上下文)</h2><p>BFC(Block formatting context)</p>
<p>直译为”块级格式化上下文”。</p>
<h3 id="元素的显示模式"><a href="#元素的显示模式" class="headerlink" title="元素的显示模式"></a>元素的显示模式</h3><p>我们前面讲过 元素的显示模式 display。 </p>
<p>分为 块级元素   行内元素  行内块元素 ，其实，它还有很多其他显示模式。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/dis.png"  style="border: 1px dashed #ccc; padding: 5px;" /></p>
<h3 id="那些元素会具有BFC的条件"><a href="#那些元素会具有BFC的条件" class="headerlink" title="那些元素会具有BFC的条件"></a>那些元素会具有BFC的条件</h3><p>不是所有的元素模式都能产生BFC，w3c 规范： </p>
<p>display 属性为 block, list-item, table 的元素，会产生BFC.</p>
<p>大家有么有发现这个三个都是用来布局最为合理的元素，因为他们就是用来可视化布局。</p>
<p>注意其他的，display属性，比如 line 等等，他们创建的是 IFC ，我们暂且不研究。</p>
<p>这个BFC 有着具体的布局特性： </p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/box.gif" /></p>
<p>有宽度和高度 ， 有 外边距margin  有内边距padding 有边框 border。</p>
<p>就好比，你有了练习武术的体格了。 有潜力，有资质。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/gu.jpeg" width="400" /></p>
<h3 id="什么情况下可以让元素产生BFC"><a href="#什么情况下可以让元素产生BFC" class="headerlink" title="什么情况下可以让元素产生BFC"></a>什么情况下可以让元素产生BFC</h3><p>以上盒子具有BFC条件了，就是说有资质了，但是怎样触发才会产生BFC，从而创造这个封闭的环境呢？ </p>
<p>在好比，你光有资质还不行，你需要一定额外效果才能出发的武学潜力，要么你掉到悬崖下面，捡到了一本九阴真经，要么你学习葵花宝典，欲练此功必先….</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/kuihua.png" /><br>同样，要给这些元素添加如下属性就可以触发BFC。</p>
<p>-float属性不为none</p>
<p>-position为absolute或fixed</p>
<p>-display为inline-block, table-cell, table-caption, flex, inline-flex</p>
<p>-overflow不为visible。</p>
<h3 id="BFC元素所具有的特性"><a href="#BFC元素所具有的特性" class="headerlink" title="BFC元素所具有的特性"></a>BFC元素所具有的特性</h3><p>BFC布局规则特性：</p>
<p>1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.</p>
<p>2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠</p>
<p>3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。</p>
<ol>
<li>BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。</li>
<li>计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。</li>
</ol>
<p>它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。</p>
<p>白话文： 孩子在家里愿意怎么折腾都行，但是出了家门口，你就的乖乖的，不能影响外面的任何人。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/xiong.jpeg" width="400" /></p>
<h3 id="BFC的主要用途"><a href="#BFC的主要用途" class="headerlink" title="BFC的主要用途"></a>BFC的主要用途</h3><p>BFC能用来做什么？</p>
<p>(1) 清除元素内部浮动</p>
<p>只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。</p>
<p>主要用到 </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/fu.jpg" /><br>(2) 解决外边距合并问题</p>
<p>外边距合并的问题。</p>
<p>主要用到 </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠</span><br></pre></td></tr></table></figure>
<p>属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/ma.png" /></p>
<p>(3) 制作右侧自适应的盒子问题</p>
<p>主要用到 </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/you.png" /></p>
<h3 id="BFC-总结"><a href="#BFC-总结" class="headerlink" title="BFC 总结"></a>BFC 总结</h3><p>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。</p>
<h2 id="优雅降级和渐进增强"><a href="#优雅降级和渐进增强" class="headerlink" title="优雅降级和渐进增强"></a>优雅降级和渐进增强</h2><p>什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？</p>
<p>渐进增强 progressive enhancement：</p>
<p>针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。</p>
<p> 类似 爬山，由低出往高处爬</p>
<p>  <img src= "/web/img/loading.gif" data-lazy-src="/img/media/pa.png" width="400" /></p>
<p>  <b>优雅降级 graceful degradation：</b></p>
<p>一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。</p>
<p>类似蹦极，由高处往低处下落</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/xia.jpg" /></p>
<p>　　区别：渐进增强是向上兼容，优雅降级是向下兼容。</p>
<p>个人建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。</p>
<h2 id="浏览器前缀"><a href="#浏览器前缀" class="headerlink" title="浏览器前缀"></a>浏览器前缀</h2><div class="table-container">
<table>
<thead>
<tr>
<th>浏览器前缀</th>
<th>浏览器</th>
</tr>
</thead>
<tbody>
<tr>
<td>-webkit-</td>
<td>Google Chrome, Safari, Android Browser</td>
</tr>
<tr>
<td>-moz-</td>
<td>Firefox</td>
</tr>
<tr>
<td>-o-</td>
<td>Opera</td>
</tr>
<tr>
<td>-ms-</td>
<td>Internet Explorer, Edge</td>
</tr>
<tr>
<td>-khtml-</td>
<td>Konqueror</td>
</tr>
</tbody>
</table>
</div>
<p>后面我们会有 常用的解决H5和C3 的兼容解决文件， 我们这里暂且不涉及。</p>
<h2 id="背景渐变"><a href="#背景渐变" class="headerlink" title="背景渐变"></a>背景渐变</h2><p>在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。</p>
<p>兼容性问题很严重，我们这里之讲解线性渐变</p>
<p>语法格式： </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background</span>:<span class="built_in">-webkit-linear-gradient</span>(渐变的起始位置， 起始颜色， 结束颜色)；</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background</span>:<span class="built_in">-webkit-linear-gradient</span>(渐变的起始位置， 颜色 位置， 颜色位置....)；</span><br></pre></td></tr></table></figure>
<h2 id="CSS-W3C-统一验证工具"><a href="#CSS-W3C-统一验证工具" class="headerlink" title="CSS W3C 统一验证工具"></a>CSS W3C 统一验证工具</h2><p>CssStats 是一个在线的 CSS 代码分析工具</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">网址是：  http://www.cssstats.com/</span><br></pre></td></tr></table></figure>
<p>如果你想要更全面的，这个神奇，你值得拥有：</p>
<p>W3C 统一验证工具：    <a target="_blank" rel="noopener" href="http://validator.w3.org/unicorn/">http://validator.w3.org/unicorn/</a>  ☆☆☆☆☆</p>
<p>因为它可以检测本地文件哦！！</p>
<h1 id="HTML5新标签与特性"><a href="#HTML5新标签与特性" class="headerlink" title="HTML5新标签与特性"></a>HTML5新标签与特性</h1><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/html.jpg" /></p>
<h2 id="文档类型设定"><a href="#文档类型设定" class="headerlink" title="文档类型设定"></a>文档类型设定</h2><ul>
<li>document<ul>
<li>HTML:        sublime 输入  html:4s</li>
<li>XHTML:      sublime 输入  html:xt</li>
<li>HTML5        sublime 输入  html:5       &lt;!DOCTYPE html&gt;</li>
</ul>
</li>
</ul>
<h2 id="字符设定"><a href="#字符设定" class="headerlink" title="字符设定"></a>字符设定</h2><ul>
<li><p><meta http-equiv="charset" content="utf-8">：HTML与XHTML中建议这样去写</p>
</li>
<li><p><meta charset="utf-8">：HTML5的标签中建议这样去写</p>
</li>
</ul>
<h2 id="常用新标签"><a href="#常用新标签" class="headerlink" title="常用新标签"></a>常用新标签</h2><p> w3c  手册中文官网     :   <a target="_blank" rel="noopener" href="http://w3school.com.cn/">http://w3school.com.cn/</a></p>
<ul>
<li><p>header：定义文档的页眉 头部</p>
</li>
<li><p>nav：定义导航链接的部分</p>
</li>
<li><p>footer：定义文档或节的页脚 底部</p>
</li>
<li><p>article：定义文章。</p>
</li>
<li><p>section：定义文档中的节（section、区段）</p>
</li>
<li><p>aside：定义其所处内容之外的内容 侧边</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">header</span>&gt;</span> 语义 :定义页面的头部  页眉<span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">nav</span>&gt;</span>  语义 :定义导航栏 <span class="tag">&lt;/<span class="name">nav</span>&gt;</span> </span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span>&gt;</span> 语义: 定义 页面底部 页脚<span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">article</span>&gt;</span> 语义:  定义文章<span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">section</span>&gt;</span> 语义： 定义区域<span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">aside</span>&gt;</span> 语义： 定义其所处内容之外的内容 侧边<span class="tag">&lt;/<span class="name">aside</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li><p>datalist   标签定义选项列表。请与 input 元素配合使用该元素</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">value</span>=<span class="string">&quot;输入明星&quot;</span> <span class="attr">list</span>=<span class="string">&quot;star&quot;</span>/&gt;</span> <span class="comment">&lt;!--  input里面用 list --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">datalist</span> <span class="attr">id</span>=<span class="string">&quot;star&quot;</span>&gt;</span>   <span class="comment">&lt;!-- datalist 里面用 id  来实现和 input 链接 --&gt;</span>  </span><br><span class="line">    		<span class="tag">&lt;<span class="name">option</span>&gt;</span>刘德华<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    		<span class="tag">&lt;<span class="name">option</span>&gt;</span>刘若英<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    		<span class="tag">&lt;<span class="name">option</span>&gt;</span>刘晓庆<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    		<span class="tag">&lt;<span class="name">option</span>&gt;</span>郭富城<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    		<span class="tag">&lt;<span class="name">option</span>&gt;</span>张学友<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    		<span class="tag">&lt;<span class="name">option</span>&gt;</span>郭郭<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">datalist</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li><p>fieldset 元素可将表单内的相关元素分组，打包      legend 搭配使用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">fieldset</span>&gt;</span></span><br><span class="line">    		<span class="tag">&lt;<span class="name">legend</span>&gt;</span>用户登录<span class="tag">&lt;/<span class="name">legend</span>&gt;</span>  标题</span><br><span class="line">    		用户名: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    		密　码: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">fieldset</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="新增的input-type属性值："><a href="#新增的input-type属性值：" class="headerlink" title="新增的input type属性值："></a>新增的input type属性值：</h2><div class="table-container">
<table>
<thead>
<tr>
<th><strong>类型<em>**</em></strong></th>
<th><strong>使用示例<em>**</em></strong></th>
<th><strong>含义<em>**</em></strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>email<em>**</em></strong></td>
<td><input type="email"></td>
<td>输入邮箱格式</td>
</tr>
<tr>
<td><strong>tel<em>**</em></strong></td>
<td><input type="tel"></td>
<td>输入手机号码格式</td>
</tr>
<tr>
<td><strong>url<em>**</em></strong></td>
<td><input type="url"></td>
<td>输入url格式</td>
</tr>
<tr>
<td><strong>number<em>**</em></strong></td>
<td><input type="number"></td>
<td>输入数字格式</td>
</tr>
<tr>
<td><strong>search<em>**</em></strong></td>
<td><input type="search"></td>
<td>搜索框（体现语义化）</td>
</tr>
<tr>
<td><strong>range<em>**</em></strong></td>
<td><input type="range"></td>
<td>自由拖动滑块</td>
</tr>
<tr>
<td><strong>time<em>**</em></strong></td>
<td><input type="time"></td>
<td>小时分钟</td>
</tr>
<tr>
<td><strong>date<em>**</em></strong></td>
<td><input type="date"></td>
<td>年月日</td>
</tr>
<tr>
<td><strong>datetime<em>**</em></strong></td>
<td><input type="datetime"></td>
<td>时间</td>
</tr>
<tr>
<td><strong>month<em>**</em></strong></td>
<td><input type="month"></td>
<td>月年</td>
</tr>
<tr>
<td><strong>week<em>**</em></strong></td>
<td><input type="week"></td>
<td>星期 年</td>
</tr>
</tbody>
</table>
</div>
<h2 id="-1"><a href="#-1" class="headerlink" title=" "></a> </h2><h2 id="常用新属性"><a href="#常用新属性" class="headerlink" title="常用新属性"></a>常用新属性</h2><div class="table-container">
<table>
<thead>
<tr>
<th><strong>属性<em>**</em></strong></th>
<th><strong>用法<em>**</em></strong></th>
<th><strong>含义<em>**</em></strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>placeholder<em>**</em></strong></td>
<td><input type="text" placeholder="请输入用户名"></td>
<td>占位符  当用户输入的时候 里面的文字消失  删除所有文字，自动返回</td>
</tr>
<tr>
<td><strong>autofocus<em>**</em></strong></td>
<td><input type="text" autofocus></td>
<td>规定当页面加载时 input 元素应该自动获得焦点</td>
</tr>
<tr>
<td><strong>multiple<em>**</em></strong></td>
<td><input type="file" multiple></td>
<td>多文件上传</td>
</tr>
<tr>
<td><strong>autocomplete<em>**</em></strong></td>
<td><input type="text" autocomplete="off"></td>
<td>规定表单是否应该启用自动完成功能  有2个值，一个是on 一个是off      on 代表记录已经输入的值  1.autocomplete 首先需要提交按钮 <br/>2.这个表单您必须给他名字</td>
</tr>
<tr>
<td><strong>required<em>**</em></strong></td>
<td><input type="text" required></td>
<td>必填项  内容不能为空</td>
</tr>
<tr>
<td><strong>accesskey<em>**</em></strong></td>
<td><input type="text" accesskey="s"></td>
<td>规定激活（使元素获得焦点）元素的快捷键   采用 alt + s的形式</td>
</tr>
</tbody>
</table>
</div>
<h2 id="综合案例"><a href="#综合案例" class="headerlink" title="综合案例"></a>综合案例</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fieldset</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">legend</span>&gt;</span>学生档案<span class="tag">&lt;/<span class="name">legend</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;userName&quot;</span>&gt;</span>姓名:<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;userName&quot;</span> <span class="attr">id</span>=<span class="string">&quot;userName&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入用户名&quot;</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;userPhone&quot;</span>&gt;</span>手机号码:<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;tel&quot;</span> <span class="attr">name</span>=<span class="string">&quot;userPhone&quot;</span> <span class="attr">id</span>=<span class="string">&quot;userPhone&quot;</span> <span class="attr">pattern</span>=<span class="string">&quot;^1\d&#123;10&#125;$&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;email&quot;</span>&gt;</span>邮箱地址:<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;email&quot;</span> <span class="attr">required</span> <span class="attr">name</span>=<span class="string">&quot;email&quot;</span> <span class="attr">id</span>=<span class="string">&quot;email&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;collage&quot;</span>&gt;</span>所属学院:<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;collage&quot;</span> <span class="attr">id</span>=<span class="string">&quot;collage&quot;</span> <span class="attr">list</span>=<span class="string">&quot;cList&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请选择&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">datalist</span> <span class="attr">id</span>=<span class="string">&quot;cList&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;前端与移动开发学院&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;java学院&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">&quot;c++学院&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">datalist</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;score&quot;</span>&gt;</span>入学成绩:<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;number&quot;</span> <span class="attr">max</span>=<span class="string">&quot;100&quot;</span> <span class="attr">min</span>=<span class="string">&quot;0&quot;</span> <span class="attr">value</span>=<span class="string">&quot;0&quot;</span> <span class="attr">id</span>=<span class="string">&quot;score&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">fieldset</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">legend</span>&gt;</span>学生档案思密达<span class="tag">&lt;/<span class="name">legend</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">label</span>&gt;</span>姓名: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入学生名字&quot;</span>/&gt;</span><span class="tag">&lt;/<span class="name">label</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">label</span>&gt;</span>手机号: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;tel&quot;</span> /&gt;</span><span class="tag">&lt;/<span class="name">label</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">label</span>&gt;</span>邮箱: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;email&quot;</span> /&gt;</span><span class="tag">&lt;/<span class="name">label</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">label</span>&gt;</span>所属学院:  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请选择学院&quot;</span> <span class="attr">list</span>=<span class="string">&quot;xueyuan&quot;</span>/&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">datalist</span> <span class="attr">id</span>=<span class="string">&quot;xueyuan&quot;</span>&gt;</span></span><br><span class="line">    		<span class="tag">&lt;<span class="name">option</span>&gt;</span>java学院<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    		<span class="tag">&lt;<span class="name">option</span>&gt;</span>前端学院<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    		<span class="tag">&lt;<span class="name">option</span>&gt;</span>php学院<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    		<span class="tag">&lt;<span class="name">option</span>&gt;</span>设计学院<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;/<span class="name">datalist</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    	<span class="tag">&lt;<span class="name">br</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">    	<span class="tag">&lt;<span class="name">label</span>&gt;</span>出生日期:   <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;date&quot;</span> /&gt;</span><span class="tag">&lt;/<span class="name">label</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">label</span>&gt;</span>成绩:  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;number&quot;</span> /&gt;</span><span class="tag">&lt;/<span class="name">label</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">label</span>&gt;</span>毕业时间:  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;date&quot;</span> /&gt;</span><span class="tag">&lt;/<span class="name">label</span>&gt;</span> <span class="tag">&lt;<span class="name">br</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> /&gt;</span>  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;reset&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">fieldset</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;inTime&quot;</span>&gt;</span>入学日期:<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;date&quot;</span> <span class="attr">id</span>=<span class="string">&quot;inTime&quot;</span> <span class="attr">name</span>=<span class="string">&quot;inTime&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;leaveTime&quot;</span>&gt;</span>毕业日期:<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;date&quot;</span> <span class="attr">id</span>=<span class="string">&quot;leaveTime&quot;</span> <span class="attr">name</span>=<span class="string">&quot;leaveTime&quot;</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fieldset</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="多媒体标签"><a href="#多媒体标签" class="headerlink" title="多媒体标签"></a>多媒体标签</h2><ul>
<li>embed：标签定义嵌入的内容</li>
<li>audio：播放音频</li>
<li>video：播放视频</li>
</ul>
<h3 id="多媒体-embed（会使用）"><a href="#多媒体-embed（会使用）" class="headerlink" title="多媒体 embed（会使用）"></a>多媒体 embed（会使用）</h3><p>embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。</p>
<p>因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">embed</span> <span class="attr">src</span>=<span class="string">&quot;http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf&quot;</span> <span class="attr">allowFullScreen</span>=<span class="string">&quot;true&quot;</span> <span class="attr">quality</span>=<span class="string">&quot;high&quot;</span> <span class="attr">width</span>=<span class="string">&quot;480&quot;</span> <span class="attr">height</span>=<span class="string">&quot;400&quot;</span> <span class="attr">align</span>=<span class="string">&quot;middle&quot;</span> <span class="attr">allowScriptAccess</span>=<span class="string">&quot;always&quot;</span> <span class="attr">type</span>=<span class="string">&quot;application/x-shockwave-flash&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">embed</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p> <img src= "/web/img/loading.gif" data-lazy-src="/img/media/embed.png" /></p>
<p> 优酷，土豆，爱奇艺，腾讯、乐视等等</p>
<ol>
<li>先上传   </li>
<li>在分享</li>
</ol>
<h3 id="多媒体-audio"><a href="#多媒体-audio" class="headerlink" title="多媒体 audio"></a>多媒体 audio</h3><p>HTML5通过<audio>标签来解决音频播放的问题。</p>
<p>使用相当简单，如下图所示</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498468026526.png" alt="1498468026526"> </p>
<p>并且可以通过附加属性可以更友好控制音频的播放，如：</p>
<p>autoplay 自动播放</p>
<p>controls 是否显不默认播放控件</p>
<p>loop 循环播放    如果这个属性不写 默认播放一次        loop  或者  loop = “loop”    表示无限循环</p>
<p>由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498468041058.png" alt="1498468041058"> </p>
<p>多浏览器支持的方案，如下图</p>
<p><source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498468052965.png" alt="1498468052965"> </p>
<h3 id="多媒体-video"><a href="#多媒体-video" class="headerlink" title="多媒体 video"></a>多媒体 video</h3><p>HTML5通过<audio>标签来解决音频播放的问题。</p>
<p>同音频播放一样，<video>使用也相当简单，如下图</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498468072194.png" alt="1498468072194"> </p>
<p>同样，通过附加属性可以更友好的控制视频的播放</p>
<p>autoplay 自动播放</p>
<p>controls 是否显示默认播放控件</p>
<p>loop 循环播放</p>
<p>width 设置播放窗口宽度</p>
<p>height 设置播放窗口的高度</p>
<p>由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498468086199.png" alt="1498468086199"> </p>
<p><strong>多浏览器支持的方案，如下图<em>**</em></strong></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498468097509.png" alt="1498468097509"></p>
<h1 id="-2"><a href="#-2" class="headerlink" title=" "></a> </h1><h1 id="CSS3-新增选择器"><a href="#CSS3-新增选择器" class="headerlink" title="CSS3 新增选择器"></a>CSS3 新增选择器</h1><h3 id="结构-位置-伪类选择器（CSS3"><a href="#结构-位置-伪类选择器（CSS3" class="headerlink" title="结构(位置)伪类选择器（CSS3)"></a>结构(位置)伪类选择器（CSS3)</h3><ul>
<li>:first-child :选取属于其父元素的首个子元素的指定选择器</li>
<li>:last-child :选取属于其父元素的最后一个子元素的指定选择器</li>
<li>:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型</li>
<li>:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。<br>n 可以是数字、关键词或公式</li>
<li></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">:first</span>-child &#123; <span class="comment">/*  选择第一个孩子 */</span></span><br><span class="line">        		<span class="attribute">color</span>: pink; </span><br><span class="line">        	&#125;</span><br><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">:last-child</span> &#123;   <span class="comment">/* 最后一个孩子 */</span></span><br><span class="line">        		<span class="attribute">color</span>: purple;</span><br><span class="line">        	&#125;</span><br><span class="line"><span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(<span class="number">4</span>) &#123;   <span class="comment">/* 选择第4个孩子  n  代表 第几个的意思 */</span> </span><br><span class="line">				<span class="attribute">color</span>: skyblue;</span><br><span class="line">        	&#125;</span><br></pre></td></tr></table></figure>
<h3 id="目标伪类选择器-CSS3"><a href="#目标伪类选择器-CSS3" class="headerlink" title="目标伪类选择器(CSS3)"></a>目标伪类选择器(CSS3)</h3><p> :target目标伪类选择器 :选择器可用于选取当前活动的目标元素</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-pseudo">:target</span> &#123;</span><br><span class="line">		<span class="attribute">color</span>: red;</span><br><span class="line">		<span class="attribute">font-size</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h2><p>选取标签带有某些特殊属性的选择器 我们成为属性选择器</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 获取到 拥有 该属性的元素 */</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[class^=font]</span> &#123; <span class="comment">/*  class^=font 表示 font 开始位置就行了 */</span></span><br><span class="line">			<span class="attribute">color</span>: pink;</span><br><span class="line">		&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[class$=footer]</span> &#123; <span class="comment">/*  class$=footer 表示 footer 结束位置就行了 */</span></span><br><span class="line">			<span class="attribute">color</span>: skyblue;</span><br><span class="line">		&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[class*=tao]</span> &#123; <span class="comment">/* class*=tao  *=  表示tao 在任意位置都可以 */</span></span><br><span class="line">			<span class="attribute">color</span>: green;</span><br><span class="line">		&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;font12&quot;</span>&gt;</span>属性选择器<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;font12&quot;</span>&gt;</span>属性选择器<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;font24&quot;</span>&gt;</span>属性选择器<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;font24&quot;</span>&gt;</span>属性选择器<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;font24&quot;</span>&gt;</span>属性选择器<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;24font&quot;</span>&gt;</span>属性选择器123<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;sub-footer&quot;</span>&gt;</span>属性选择器footer<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;jd-footer&quot;</span>&gt;</span>属性选择器footer<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;news-tao-nav&quot;</span>&gt;</span>属性选择器<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;news-tao-header&quot;</span>&gt;</span>属性选择器<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;tao-header&quot;</span>&gt;</span>属性选择器<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="伪元素选择器（CSS3"><a href="#伪元素选择器（CSS3" class="headerlink" title="伪元素选择器（CSS3)"></a>伪元素选择器（CSS3)</h2><ol>
<li>E::first-letter文本的第一个单词或字（如中文、日文、韩文等）</li>
<li>E::first-line 文本第一行；</li>
<li>E::selection 可改变选中文本的样式；</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">::first-letter</span> &#123;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">color</span>: hotpink;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 首行特殊样式 */</span></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">::first-line</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: skyblue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">::selection</span> &#123;</span><br><span class="line">  <span class="comment">/* font-size: 50px; */</span></span><br><span class="line">  <span class="attribute">color</span>: orange;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>4、E::before和E::after</p>
<p>在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>::befor &#123;</span><br><span class="line">  <span class="attribute">content</span>:<span class="string">&quot;开始&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>:<span class="string">&quot;结束&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。</p>
<p>“:” 与 “::” 区别在于区分伪类和伪元素</p>
<p>之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查</p>
<p><strong>注意</strong></p>
<p>伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的<code>content</code>属性，表示伪元素的内容,设置:before和:after时必须设置其<code>content</code>属性，否则伪元素就不起作用。</p>
<h2 id="背景缩放-CSS3"><a href="#背景缩放-CSS3" class="headerlink" title="背景缩放(CSS3)"></a>背景缩放(CSS3)</h2><p>通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。</p>
<p>其参数设置如下：</p>
<p>a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）</p>
<p>b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多</p>
<p>c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">&#x27;images/gyt.jpg&#x27;</span>);</span><br><span class="line">			<span class="attribute">background-size</span>: <span class="number">300px</span> <span class="number">100px</span>;</span><br><span class="line">			<span class="comment">/* background-size: contain; */</span></span><br><span class="line">			<span class="comment">/* background-size: cover; */</span></span><br></pre></td></tr></table></figure>
<h2 id="多背景-CSS3"><a href="#多背景-CSS3" class="headerlink" title="多背景(CSS3)"></a>多背景(CSS3)</h2><p>以逗号分隔可以设置多背景，可用于自适应布局  做法就是 用逗号隔开就好了。</p>
<ul>
<li>一个元素可以设置多重背景图像。 </li>
<li>每组属性间使用逗号分隔。 </li>
<li>如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。</li>
<li>为了避免背景色将图像盖住，背景色通常都定义在最后一组上，</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background</span>:<span class="built_in">url</span>(<span class="string">test1.jpg</span>) no-repeat scroll <span class="number">10px</span> <span class="number">20px</span>/<span class="number">50px</span> <span class="number">60px</span>  ,</span><br><span class="line">	   <span class="built_in">url</span>(<span class="string">test1.jpg</span>) no-repeat scroll <span class="number">10px</span> <span class="number">20px</span>/<span class="number">70px</span> <span class="number">90px</span> ,</span><br><span class="line">	   <span class="built_in">url</span>(<span class="string">test1.jpg</span>) no-repeat scroll <span class="number">10px</span> <span class="number">20px</span>/<span class="number">110px</span> <span class="number">130px</span> c <span class="number">#aaa</span>;</span><br></pre></td></tr></table></figure>
<ul>
<li><h2 id="凹凸文字"><a href="#凹凸文字" class="headerlink" title="凹凸文字"></a>凹凸文字</h2></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;head&gt;</span><br><span class="line">        &lt;meta charset=&quot;utf-<span class="number">8</span>&quot;&gt;</span><br><span class="line">        &lt;style&gt;</span><br><span class="line">        <span class="selector-tag">body</span> &#123;</span><br><span class="line">        	<span class="attribute">background-color</span>: <span class="number">#ccc</span>;</span><br><span class="line">        &#125;</span><br><span class="line">		<span class="selector-tag">div</span> &#123;</span><br><span class="line">			<span class="attribute">color</span>: <span class="number">#ccc</span>;</span><br><span class="line">			<span class="attribute">font</span>: <span class="number">700</span> <span class="number">80px</span> <span class="string">&quot;微软雅黑&quot;</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">			<span class="comment">/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */</span></span><br><span class="line">			<span class="attribute">text-shadow</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">1px</span> <span class="number">#000</span>, -<span class="number">1px</span> -<span class="number">1px</span> <span class="number">1px</span> <span class="number">#fff</span>;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span><span class="selector-pseudo">:last-child</span> &#123;</span><br><span class="line">			<span class="comment">/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */</span></span><br><span class="line">			<span class="attribute">text-shadow</span>: -<span class="number">1px</span> -<span class="number">1px</span> <span class="number">1px</span> <span class="number">#000</span>, <span class="number">1px</span> <span class="number">1px</span> <span class="number">1px</span> <span class="number">#fff</span>;</span><br><span class="line">		&#125;</span><br><span class="line"></span><br><span class="line">        &lt;/style&gt;</span><br><span class="line">    &lt;/head&gt;</span><br><span class="line">    &lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">div</span>&gt;我是凸起的文字&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">div</span>&gt;我是凹下的文字&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">    &lt;/<span class="selector-tag">body</span>&gt;</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498467533412.png" alt="1498467533412"></p>
<h2 id="CSS3盒模型"><a href="#CSS3盒模型" class="headerlink" title="CSS3盒模型"></a>CSS3盒模型</h2><p>CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。</p>
<p>可以分成两种情况：</p>
<p>1、box-sizing: content-box  盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode</p>
<p>2、box-sizing: border-box  盒子大小为 width    就是说  padding 和 border 是包含到width里面的</p>
<p>注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">			<span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">			<span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">			<span class="attribute">background-color</span>: pink; </span><br><span class="line">			<span class="attribute">box-sizing</span>: content-box;  <span class="comment">/*  就是以前的标准盒模型  w3c */</span></span><br><span class="line">			<span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">			<span class="attribute">border</span>: <span class="number">15px</span> solid red;</span><br><span class="line">			<span class="comment">/* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span><span class="selector-pseudo">:last-child</span> &#123;</span><br><span class="line">			<span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">			<span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">			<span class="attribute">background-color</span>: purple;</span><br><span class="line">			<span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">			<span class="attribute">box-sizing</span>: border-box;   <span class="comment">/* padding border  不撑开盒子 */</span></span><br><span class="line">			<span class="attribute">border</span>: <span class="number">15px</span> solid red;</span><br><span class="line">			<span class="comment">/* margin: 10px; */</span></span><br><span class="line">			<span class="comment">/* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="-3"><a href="#-3" class="headerlink" title=" "></a> </h2><h2 id="过渡-CSS3"><a href="#过渡-CSS3" class="headerlink" title="过渡(CSS3)"></a>过渡(CSS3)</h2><p>过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。</p>
<p>帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498445034712.png" alt="1498445034712"></p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/zhen.gif" /></p>
<p>在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。</p>
<p>语法格式:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">transition: 要过渡的属性  花费时间  运动曲线  何时开始;</span><br><span class="line">如果有多组属性变化，还是用逗号隔开。</span><br></pre></td></tr></table></figure>
<div class="table-container">
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>transition</td>
<td>简写属性，用于在一个属性中设置四个过渡属性。</td>
<td>3</td>
</tr>
<tr>
<td>transition-property</td>
<td>规定应用过渡的 CSS 属性的名称。</td>
<td>3</td>
</tr>
<tr>
<td>transition-duration</td>
<td>定义过渡效果花费的时间。默认是 0。</td>
<td>3</td>
</tr>
<tr>
<td>transition-timing-function</td>
<td>规定过渡效果的时间曲线。默认是 “ease”。</td>
<td>3</td>
</tr>
<tr>
<td>transition-delay</td>
<td>规定过渡效果何时开始。默认是 0。</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<p>如果想要所有的属性都变化过渡， 写一个all 就可以</p>
<p>transition-duration  花费时间  单位是  秒     s    比如 0.5s    这个s单位必须写      ms 毫秒</p>
<p>运动曲线   默认是 ease</p>
<p> 何时开始  默认是 0s  立马开始</p>
<p>运动曲线示意图：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498445454760.png" alt="1498445454760"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">			<span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">			<span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">			<span class="attribute">background-color</span>: pink;</span><br><span class="line">			<span class="comment">/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */</span></span><br><span class="line">			<span class="attribute">transition</span>: width <span class="number">0.6s</span> ease <span class="number">0s</span>, height <span class="number">0.3s</span> ease-in <span class="number">1s</span>;</span><br><span class="line">			<span class="comment">/* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */</span></span><br><span class="line">  </span><br><span class="line">			</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> &#123;  <span class="comment">/* 鼠标经过盒子，我们的宽度变为400 */</span></span><br><span class="line"></span><br><span class="line">			<span class="attribute">width</span>: <span class="number">600px</span>;</span><br><span class="line">			<span class="attribute">height</span>: <span class="number">300px</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="attribute">transition</span>: all <span class="number">0.6s</span>;  <span class="comment">/* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */</span></span><br></pre></td></tr></table></figure>
<h2 id="2D变形-CSS3-transform"><a href="#2D变形-CSS3-transform" class="headerlink" title="2D变形(CSS3) transform"></a>2D变形(CSS3) transform</h2><p>transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。</p>
<p>变形转换 transform    transform  变换 变形的意思             《 transformers 变形金刚》</p>
<h3 id="移动-translate-x-y"><a href="#移动-translate-x-y" class="headerlink" title="移动 translate(x, y)"></a>移动 translate(x, y)</h3><p>translate 移动平移的意思</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498443715586.png" alt="1498443715586"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">translate(<span class="number">50px</span>,<span class="number">50px</span>);</span><br></pre></td></tr></table></figure>
<p>使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。</p>
<p>可以改变元素的位置，x、y可为负值；</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）</span><br><span class="line">translateX(x)仅水平方向移动（X轴移动）</span><br><span class="line">translateY(Y)仅垂直方向移动（Y轴移动）</span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">499.9999px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line">  <span class="attribute">background</span>: pink;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">left</span>:<span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">top</span>:<span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">transform</span>:<span class="built_in">translate</span>(-<span class="number">50%</span>,-<span class="number">50%</span>);  <span class="comment">/* 走的自己的一半 */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p> 让定位的盒子水平居中</p>
<h3 id="缩放-scale-x-y"><a href="#缩放-scale-x-y" class="headerlink" title="缩放 scale(x, y)"></a>缩放 scale(x, y)</h3><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498444645795.png" alt="1498444645795"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>:<span class="built_in">scale</span>(<span class="number">0.8</span>,<span class="number">1</span>);</span><br></pre></td></tr></table></figure>
<p>可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）</span><br><span class="line">scaleX(x)元素仅水平方向缩放（X轴缩放）</span><br><span class="line">scaleY(y)元素仅垂直方向缩放（Y轴缩放）</span><br></pre></td></tr></table></figure>
<p> scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大</p>
<h3 id="旋转-rotate-deg"><a href="#旋转-rotate-deg" class="headerlink" title="旋转 rotate(deg)"></a>旋转 rotate(deg)</h3><p>可以对元素进行旋转，正值为顺时针，负值为逆时针；</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498443651293.png" alt="1498443651293"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>:<span class="built_in">rotate</span>(<span class="number">45deg</span>);</span><br></pre></td></tr></table></figure>
<p> 注意单位是 deg 度数      </p>
<h3 id="transform-origin可以调整元素转换变形的原点"><a href="#transform-origin可以调整元素转换变形的原点" class="headerlink" title="transform-origin可以调整元素转换变形的原点"></a>transform-origin可以调整元素转换变形的原点</h3><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498443912530.png" alt="1498443912530"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;<span class="attribute">transform-origin</span>: left top;<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">45deg</span>); &#125;  <span class="comment">/* 改变元素原点到左上角，然后进行顺时旋转45度 */</span>    </span><br></pre></td></tr></table></figure>
<p> 如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用  px 像素。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;<span class="attribute">transform-origin</span>: <span class="number">10px</span> <span class="number">10px</span>;<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">45deg</span>); &#125;  <span class="comment">/* 改变元素原点到x 为10  y 为10，然后进行顺时旋转45度 */</span> </span><br></pre></td></tr></table></figure>
<p>案例旋转楚乔传</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">			<span class="attribute">width</span>: <span class="number">250px</span>;</span><br><span class="line">			<span class="attribute">height</span>: <span class="number">170px</span>;</span><br><span class="line">			<span class="attribute">border</span>: <span class="number">1px</span> solid pink;</span><br><span class="line">			<span class="attribute">margin</span>: <span class="number">200px</span> auto;</span><br><span class="line">			<span class="attribute">position</span>: relative;</span><br><span class="line"></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">			<span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">			<span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">			<span class="attribute">position</span>: absolute;</span><br><span class="line">			<span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">			<span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">			<span class="attribute">transition</span>: all <span class="number">0.6s</span>;</span><br><span class="line">			<span class="attribute">transform-origin</span>: top right;</span><br><span class="line">		</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">img</span><span class="selector-pseudo">:nth-child</span>(<span class="number">1</span>) &#123;  <span class="comment">/* 鼠标经过div  第一张图片旋转 */</span></span><br><span class="line">			<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">60deg</span>);</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">img</span><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>) &#123;  </span><br><span class="line">			<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">120deg</span>);</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">img</span><span class="selector-pseudo">:nth-child</span>(<span class="number">3</span>) &#123;  </span><br><span class="line">			<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">180deg</span>);</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">img</span><span class="selector-pseudo">:nth-child</span>(<span class="number">4</span>) &#123;  </span><br><span class="line">			<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">240deg</span>);</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">img</span><span class="selector-pseudo">:nth-child</span>(<span class="number">5</span>) &#123;  </span><br><span class="line">			<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">300deg</span>);</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">img</span><span class="selector-pseudo">:nth-child</span>(<span class="number">6</span>) &#123;  </span><br><span class="line">			<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">360deg</span>);</span><br><span class="line">		&#125;</span><br></pre></td></tr></table></figure>
<h3 id="倾斜-skew-deg-deg"><a href="#倾斜-skew-deg-deg" class="headerlink" title="倾斜 skew(deg, deg)"></a>倾斜 skew(deg, deg)</h3><p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498443827389.png" alt="1498443827389"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>:<span class="built_in">skew</span>(<span class="number">30deg</span>,<span class="number">0deg</span>);</span><br></pre></td></tr></table></figure>
<p>该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。</p>
<p>可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。</p>
<h2 id="3D变形-CSS3-transform"><a href="#3D变形-CSS3-transform" class="headerlink" title="3D变形(CSS3) transform"></a>3D变形(CSS3) transform</h2><p>2d    x  y  </p>
<p>3d  x  y  z</p>
<p> 左手坐标系</p>
<p>伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498445587576.png" alt="1498445587576"></p>
<p>CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498459001951.png" alt="1498459001951"></p>
<p>简单记住他们的坐标：</p>
<p> x左边是负的，右边是正的</p>
<p>y 上面是负的， 下面是正的</p>
<p>z 里面是负的， 外面是正的</p>
<h3 id="rotateX"><a href="#rotateX" class="headerlink" title="rotateX()"></a>rotateX()</h3><p> 就是沿着 x 立体旋转.</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498445756802.png" alt="1498445756802"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>:all <span class="number">0.5s</span> ease <span class="number">0s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">img</span>:hove &#123;</span><br><span class="line"></span><br><span class="line">  <span class="attribute">transform</span>:<span class="built_in">rotateX</span>(<span class="number">180deg</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="rotateY"><a href="#rotateY" class="headerlink" title="rotateY()"></a>rotateY()</h3><p>沿着y轴进行旋转</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498446043198.png" alt="1498446043198"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>:all <span class="number">0.5s</span> ease <span class="number">0s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">img</span>:hove &#123;</span><br><span class="line"></span><br><span class="line">  <span class="attribute">transform</span>:<span class="built_in">rotateX</span>(<span class="number">180deg</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="rotateZ-"><a href="#rotateZ-" class="headerlink" title="rotateZ()"></a>rotateZ()</h3><p>沿着z轴进行旋转</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>:all .<span class="number">25s</span> ease-in <span class="number">0s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="comment">/* transform:rotateX(180deg); */</span></span><br><span class="line">  <span class="comment">/* transform:rotateY(180deg); */</span></span><br><span class="line">  <span class="comment">/* transform:rotateZ(180deg); */</span></span><br><span class="line">  <span class="comment">/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="透视-perspective"><a href="#透视-perspective" class="headerlink" title="透视(perspective)"></a>透视(perspective)</h3><p>电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。</p>
<p>透视可以将一个2D平面，在转换的过程当中，呈现3D效果。</p>
<ul>
<li>透视原理： 近大远小 。</li>
<li>浏览器透视：把近大远小的所有图像，透视在屏幕上。</li>
<li>perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置</li>
</ul>
<p>注：并非任何情况下需要透视效果，根据开发需要进行设置。</p>
<p>perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素</p>
<p>理解透视距离原理：</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498446715314.png" alt="1498446715314"></p>
<h3 id="translateX-x"><a href="#translateX-x" class="headerlink" title="translateX(x)"></a>translateX(x)</h3><p>仅水平方向移动**（X轴移动）</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498459697576.png" alt="1498459697576"></p>
<p>主要目的实现移动效果</p>
<h3 id="translateY-y"><a href="#translateY-y" class="headerlink" title="translateY(y)"></a>translateY(y)</h3><p>仅垂直方向移动（Y轴移动）</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498459770252.png" alt="1498459770252"></p>
<h3 id="translateZ-z"><a href="#translateZ-z" class="headerlink" title="translateZ(z)"></a>translateZ(z)</h3><p>transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。</p>
<h3 id="translate3d-x-y-z"><a href="#translate3d-x-y-z" class="headerlink" title="translate3d(x,y,z)"></a>translate3d(x,y,z)</h3><p>[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值</p>
<h3 id="开门案例"><a href="#开门案例" class="headerlink" title="开门案例"></a>开门案例</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.door</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">100px</span> auto;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid gray;</span><br><span class="line">  <span class="attribute">perspective</span>: <span class="number">1000px</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">&#x27;images/dog.gif&#x27;</span>) no-repeat cover;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.door</span> &gt; <span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid black;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.left</span> &#123;</span><br><span class="line">  <span class="attribute">float</span>: left;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: brown;</span><br><span class="line">  <span class="attribute">transform-origin</span>: left center;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">1s</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.left</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">10px</span>);</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid whitesmoke;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.right</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">float</span>: left;</span><br><span class="line">  <span class="attribute">background-color</span>: brown;</span><br><span class="line">  <span class="attribute">transform-origin</span>: right center;</span><br><span class="line">  <span class="attribute">transition</span>: <span class="number">1s</span>;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.right</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">  <span class="attribute">left</span>: <span class="number">0px</span>;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">10px</span>);</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid whitesmoke;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.door</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.left</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(-<span class="number">130deg</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.door</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.right</span> &#123;</span><br><span class="line">  <span class="attribute">transform</span>: <span class="built_in">rotateY</span>(<span class="number">130deg</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="backface-visibility"><a href="#backface-visibility" class="headerlink" title="backface-visibility"></a>backface-visibility</h3><p>backface-visibility 属性定义当元素不面向屏幕时是否可见。</p>
<h3 id="翻转盒子案例"><a href="#翻转盒子案例" class="headerlink" title="翻转盒子案例"></a>翻转盒子案例</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">			<span class="attribute">width</span>: <span class="number">224px</span>;</span><br><span class="line">			<span class="attribute">height</span>: <span class="number">224px</span>;</span><br><span class="line">			<span class="attribute">margin</span>: <span class="number">100px</span> auto;</span><br><span class="line">			<span class="attribute">position</span>: relative;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">			<span class="attribute">position</span>: absolute;</span><br><span class="line">			<span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">			<span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">			<span class="attribute">transition</span>: all <span class="number">1s</span>; </span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span> <span class="selector-tag">img</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">			<span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">			<span class="attribute">backface-visibility</span>: hidden; <span class="comment">/* 不是正面对象屏幕，就隐藏 */</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">			<span class="attribute">transform</span>: <span class="built_in">rotateY</span>(<span class="number">180deg</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="动画-CSS3-animation"><a href="#动画-CSS3-animation" class="headerlink" title="动画(CSS3) animation"></a>动画(CSS3) animation</h2><p>动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。</p>
<p>语法格式：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">animation</span>:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498461096243.png" alt="1498461096243"></p>
<p>关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@keyframes</span> 动画名称 &#123;</span><br><span class="line">  <span class="selector-tag">from</span>&#123; 开始位置 &#125;  <span class="number">0%</span></span><br><span class="line">  <span class="selector-tag">to</span>&#123;  结束  &#125;  <span class="number">100%</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">animation-iteration-count:infinite;  无限循环播放</span><br><span class="line">animation-play-state:paused;   暂停动画&quot;</span><br></pre></td></tr></table></figure>
<h3 id="小汽车案例"><a href="#小汽车案例" class="headerlink" title="小汽车案例"></a>小汽车案例</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">  <span class="attribute">background</span>: white;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.animation</span> &#123;</span><br><span class="line">  <span class="attribute">animation-name</span>: goback;</span><br><span class="line">  <span class="attribute">animation-duration</span>: <span class="number">5s</span>;</span><br><span class="line">  <span class="attribute">animation-timing-function</span>: ease;</span><br><span class="line">  <span class="attribute">animation-iteration-count</span>: infinite;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> goback &#123;</span><br><span class="line">  <span class="number">0%</span>&#123;&#125;</span><br><span class="line">  <span class="number">49%</span>&#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">1000px</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">55%</span>&#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">1000px</span>) <span class="built_in">rotateY</span>(<span class="number">180deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">95%</span>&#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">0</span>) <span class="built_in">rotateY</span>(<span class="number">180deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="number">100%</span>&#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">0</span>) <span class="built_in">rotateY</span>(<span class="number">0deg</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="伸缩布局-CSS3"><a href="#伸缩布局-CSS3" class="headerlink" title="伸缩布局(CSS3)"></a>伸缩布局(CSS3)</h2><p>CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。</p>
<p>主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向</p>
<p>侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的</p>
<p>方向：默认主轴从左向右，侧轴默认从上到下</p>
<p>主轴和侧轴并不是固定不变的，通过flex-direction可以互换。</p>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498441839910.png" alt="1498441839910"></p>
<p>Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多</p>
<p><strong>2、各属性详解<em>**</em></strong></p>
<p>1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配</p>
<p>min-width  最小值      min-width: 280px  最小宽度  不能小于 280</p>
<p>max-width: 1280px  最大宽度  不能大于 1280</p>
<p>2.flex-direction调整主轴方向（默认为水平方向）</p>
<p>flex-direction: column 垂直排列</p>
<p>flex-direction: row  水平排列</p>
<p><a target="_blank" rel="noopener" href="http://m.ctrip.com/html5/">http://m.ctrip.com/html5/</a>   携程网手机端地址</p>
<p>3、justify-content调整主轴对齐（水平对齐）</p>
<p>子盒子如何在父盒子里面水平对齐</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>白话文</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex-start</td>
<td>默认值。项目位于容器的开头。</td>
<td>让子元素从父容器的开头开始排序但是盒子顺序不变</td>
</tr>
<tr>
<td>flex-end</td>
<td>项目位于容器的结尾。</td>
<td>让子元素从父容器的后面开始排序但是盒子顺序不变</td>
</tr>
<tr>
<td>center</td>
<td>项目位于容器的中心。</td>
<td>让子元素在父容器中间显示</td>
</tr>
<tr>
<td>space-between</td>
<td>项目位于各行之间留有空白的容器内。</td>
<td>左右的盒子贴近父盒子，中间的平均分布空白间距</td>
</tr>
<tr>
<td>space-around</td>
<td>项目位于各行之前、之间、之后都留有空白的容器内。</td>
<td>相当于给每个盒子添加了左右margin外边距</td>
</tr>
</tbody>
</table>
</div>
<p>4、align-items调整侧轴对齐（垂直对齐）</p>
<p>子盒子如何在父盒子里面垂直对齐（单行）</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>白话文</th>
</tr>
</thead>
<tbody>
<tr>
<td>stretch</td>
<td>默认值。项目被拉伸以适应容器。</td>
<td>让子元素的高度拉伸适用父容器（子元素不给高度的前提下)</td>
</tr>
<tr>
<td>center</td>
<td>项目位于容器的中心。</td>
<td>垂直居中</td>
</tr>
<tr>
<td>flex-start</td>
<td>项目位于容器的开头。</td>
<td>垂直对齐开始位置 上对齐</td>
</tr>
<tr>
<td>flex-end</td>
<td>项目位于容器的结尾。</td>
<td>垂直对齐结束位置 底对齐</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<p>5、flex-wrap控制是否换行</p>
<p>当我们子盒子内容宽度多于父盒子的时候如何处理</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>nowrap</td>
<td>默认值。规定灵活的项目不拆行或不拆列。  不换行，则 收缩（压缩） 显示  强制一行内显示</td>
</tr>
<tr>
<td>wrap</td>
<td>规定灵活的项目在必要的时候拆行或拆列。</td>
</tr>
<tr>
<td>wrap-reverse</td>
<td>规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<p>6、flex-flow是flex-direction、flex-wrap的简写形式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">flex-flow</span>: flex-direction  flex-wrap;  </span><br></pre></td></tr></table></figure>
<p>白话记：    flex-flow: 排列方向   换不换行; </p>
<p>两个中间用空格</p>
<p>例如：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">display</span>: flex;</span><br><span class="line"><span class="comment">/* flex-direction: row;</span></span><br><span class="line"><span class="comment">flex-wrap: wrap;   这两句话等价于下面的这句话*/</span></span><br><span class="line"><span class="attribute">flex-flow</span>: column wrap;  <span class="comment">/* 两者的综合 */</span></span><br></pre></td></tr></table></figure>
<p>7、align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐</p>
<p>align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。</p>
<p>必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。</p>
<div class="table-container">
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>测试</th>
</tr>
</thead>
<tbody>
<tr>
<td>stretch</td>
<td>默认值。项目被拉伸以适应容器。</td>
<td></td>
</tr>
<tr>
<td>center</td>
<td>项目位于容器的中心。</td>
<td></td>
</tr>
<tr>
<td>flex-start</td>
<td>项目位于容器的开头。</td>
<td></td>
</tr>
<tr>
<td>flex-end</td>
<td>项目位于容器的结尾。</td>
<td></td>
</tr>
<tr>
<td>space-between</td>
<td>项目位于各行之间留有空白的容器内。</td>
<td></td>
</tr>
<tr>
<td>space-around</td>
<td>项目位于各行之前、之间、之后都留有空白的容器内。</td>
</tr>
</tbody>
</table>
</div>
<p>8、order控制子项目的排列顺序，正序方式排序，从小到大</p>
<p>用css 来控制盒子的前后顺序。  用order 就可以</p>
<p>用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">order</span>: <span class="number">1</span>;</span><br></pre></td></tr></table></figure>
<p>此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值</p>
<h2 id="文字阴影-CSS3"><a href="#文字阴影-CSS3" class="headerlink" title="文字阴影(CSS3)"></a>文字阴影(CSS3)</h2><p>以后我们可以给我们的文字添加阴影效果了  Shadow  影子  </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">text-shadow</span>:水平位置 垂直位置 模糊距离 阴影颜色;</span><br></pre></td></tr></table></figure>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498467502625.png" alt="1498467502625"> </p>
<ol>
<li>前两项是必须写的。  后两项可以选写。</li>
</ol>
<p><img src= "/web/img/loading.gif" data-lazy-src="/img/media/1498467519665.png" alt="1498467519665">    </p>
<h1 id="-4"><a href="#-4" class="headerlink" title=" "></a> </h1></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">ZhuoRu</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://zhangzhuoru.gitee.io/web/post/1038.html">https://zhangzhuoru.gitee.io/web/post/1038.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://zhangzhuoru.gitee.io/web" target="_blank">前端攻城狮ZhuoRu</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/web/tags/css/">css</a></div><div class="post_share"><div class="social-share" data-image="/web/img/tab5.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button button--animated"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/web/./img/wechat.png" target="_blank"><img class="post-qr-code-img" data-lazy-src="/web/./img/wechat.png" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/web/./img/alipay.jpg" target="_blank"><img class="post-qr-code-img" data-lazy-src="/web/./img/alipay.jpg" alt="支付寶"/></a><div class="post-qr-code-desc">支付寶</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-full"><a href="/web/post/2020715.html"><img class="prev-cover" data-lazy-src="/web/img/tab2.png" onerror="onerror=null;src='/web/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">html学习总结</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="https://thirdqq.qlogo.cn/g?b=sdk&amp;nk=2276839311&amp;s=140" onerror="this.onerror=null;this.src='/web/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">ZhuoRu</div><div class="author-info__description"></div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/web/archives/"><div class="headline">文章</div><div class="length-num">8</div></a></div><div class="card-info-data-item is-center"><a href="/web/tags/"><div class="headline">标签</div><div class="length-num">9</div></a></div><div class="card-info-data-item is-center"><a href="/web/categories/"><div class="headline">分类</div><div class="length-num">5</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/WebZhuoRu"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/WebZhuoRu" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:2276839311@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://webzhuoru.github.io/" target="_blank" title="博客"><i class="fa-solid fa-book-skull"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E7%9A%84%E5%8F%91%E5%B1%95%E5%8E%86%E7%A8%8B"><span class="toc-number">1.</span> <span class="toc-text">CSS的发展历程</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS-%E7%BD%91%E9%A1%B5%E7%9A%84%E7%BE%8E%E5%AE%B9%E5%B8%88"><span class="toc-number">2.</span> <span class="toc-text">CSS 网页的美容师</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E5%88%9D%E8%AF%86"><span class="toc-number">3.</span> <span class="toc-text">CSS初识</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BC%95%E5%85%A5CSS%E6%A0%B7%E5%BC%8F%E8%A1%A8%EF%BC%88%E4%B9%A6%E5%86%99%E4%BD%8D%E7%BD%AE%EF%BC%89"><span class="toc-number">4.</span> <span class="toc-text">引入CSS样式表（书写位置）</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%85%E9%83%A8%E6%A0%B7%E5%BC%8F%E8%A1%A8"><span class="toc-number">4.1.</span> <span class="toc-text">内部样式表</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E5%BC%8F%EF%BC%88%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F%EF%BC%89"><span class="toc-number">4.2.</span> <span class="toc-text">行内式（内联样式）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E8%A1%A8%EF%BC%88%E5%A4%96%E9%93%BE%E5%BC%8F%EF%BC%89"><span class="toc-number">4.3.</span> <span class="toc-text">外部样式表（外链式）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E7%A7%8D%E6%A0%B7%E5%BC%8F%E8%A1%A8%E6%80%BB%E7%BB%93%EF%BC%88%E4%BD%8D%E7%BD%AE%EF%BC%89"><span class="toc-number">4.4.</span> <span class="toc-text">三种样式表总结（位置）</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E6%A0%B7%E5%BC%8F%E8%A7%84%E5%88%99"><span class="toc-number">5.</span> <span class="toc-text">CSS样式规则</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%88%E9%87%8D%E7%82%B9%EF%BC%89"><span class="toc-number">6.</span> <span class="toc-text">选择器（重点）</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">7.</span> <span class="toc-text">CSS基础选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%88%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%89"><span class="toc-number">7.1.</span> <span class="toc-text">标签选择器（元素选择器）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">7.2.</span> <span class="toc-text">类选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%9A%E7%B1%BB%E5%90%8D%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">7.3.</span> <span class="toc-text">多类名选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#id%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">7.4.</span> <span class="toc-text">id选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#id%E9%80%89%E6%8B%A9%E5%99%A8%E5%92%8C%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8%E5%8C%BA%E5%88%AB"><span class="toc-number">7.5.</span> <span class="toc-text">id选择器和类选择器区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E9%85%8D%E7%AC%A6%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">7.6.</span> <span class="toc-text">通配符选择器</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F%E5%B1%9E%E6%80%A7"><span class="toc-number">8.</span> <span class="toc-text">CSS字体样式属性</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#font-size-%E5%AD%97%E5%8F%B7%E5%A4%A7%E5%B0%8F"><span class="toc-number">8.1.</span> <span class="toc-text">font-size:字号大小</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#font-family-%E5%AD%97%E4%BD%93"><span class="toc-number">8.2.</span> <span class="toc-text">font-family:字体</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS-Unicode%E5%AD%97%E4%BD%93"><span class="toc-number">8.3.</span> <span class="toc-text">CSS Unicode字体</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#font-weight-%E5%AD%97%E4%BD%93%E7%B2%97%E7%BB%86"><span class="toc-number">8.4.</span> <span class="toc-text">font-weight:字体粗细</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#font-style-%E5%AD%97%E4%BD%93%E9%A3%8E%E6%A0%BC"><span class="toc-number">8.5.</span> <span class="toc-text">font-style:字体风格</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#font-%E7%BB%BC%E5%90%88%E8%AE%BE%E7%BD%AE%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F-%E9%87%8D%E7%82%B9"><span class="toc-number">8.6.</span> <span class="toc-text">font:综合设置字体样式 (重点)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E5%A4%96%E8%A7%82%E5%B1%9E%E6%80%A7"><span class="toc-number">9.</span> <span class="toc-text">CSS外观属性</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#color-%E6%96%87%E6%9C%AC%E9%A2%9C%E8%89%B2"><span class="toc-number">9.1.</span> <span class="toc-text">color:文本颜色</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#line-height-%E8%A1%8C%E9%97%B4%E8%B7%9D"><span class="toc-number">9.2.</span> <span class="toc-text">line-height:行间距</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#text-align-%E6%B0%B4%E5%B9%B3%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F"><span class="toc-number">9.3.</span> <span class="toc-text">text-align:水平对齐方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#text-indent-%E9%A6%96%E8%A1%8C%E7%BC%A9%E8%BF%9B"><span class="toc-number">9.4.</span> <span class="toc-text">text-indent:首行缩进</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#text-decoration-%E6%96%87%E6%9C%AC%E7%9A%84%E8%A3%85%E9%A5%B0"><span class="toc-number">9.5.</span> <span class="toc-text">text-decoration 文本的装饰</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%EF%BC%88chrome%EF%BC%89"><span class="toc-number">10.</span> <span class="toc-text">开发者工具（chrome）</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">11.</span> <span class="toc-text">CSS复合选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%A4%E9%9B%86%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">11.1.</span> <span class="toc-text">交集选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B9%B6%E9%9B%86%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">11.2.</span> <span class="toc-text">并集选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">11.3.</span> <span class="toc-text">后代选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%90%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">11.4.</span> <span class="toc-text">子元素选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8B%E8%AF%95%E9%A2%98"><span class="toc-number">11.5.</span> <span class="toc-text">测试题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">11.6.</span> <span class="toc-text">伪类选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%93%BE%E6%8E%A5%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">11.6.1.</span> <span class="toc-text">链接伪类选择器</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E6%B3%A8%E9%87%8A"><span class="toc-number">12.</span> <span class="toc-text">CSS注释</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#sublime%E5%BF%AB%E6%8D%B7%E6%96%B9%E5%BC%8F"><span class="toc-number">13.</span> <span class="toc-text">sublime快捷方式</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F%EF%BC%88display%EF%BC%89"><span class="toc-number">14.</span> <span class="toc-text">标签显示模式（display）</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0-block-level"><span class="toc-number">14.1.</span> <span class="toc-text">块级元素(block-level)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0-inline-level"><span class="toc-number">14.2.</span> <span class="toc-text">行内元素(inline-level)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E5%92%8C%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E5%8C%BA%E5%88%AB"><span class="toc-number">14.3.</span> <span class="toc-text">块级元素和行内元素区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E5%9D%97%E5%85%83%E7%B4%A0%EF%BC%88inline-block%EF%BC%89"><span class="toc-number">14.4.</span> <span class="toc-text">行内块元素（inline-block）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F%E8%BD%AC%E6%8D%A2-display"><span class="toc-number">14.5.</span> <span class="toc-text">标签显示模式转换 display</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%BE%E5%A0%82%E7%BB%83%E4%B9%A0"><span class="toc-number">14.6.</span> <span class="toc-text">课堂练习</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E4%B9%A6%E5%86%99%E8%A7%84%E8%8C%83"><span class="toc-number">15.</span> <span class="toc-text">CSS书写规范</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%A9%BA%E6%A0%BC%E8%A7%84%E8%8C%83"><span class="toc-number">15.1.</span> <span class="toc-text">空格规范</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%E8%A7%84%E8%8C%83"><span class="toc-number">15.2.</span> <span class="toc-text">选择器规范</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E8%A7%84%E8%8C%83"><span class="toc-number">15.3.</span> <span class="toc-text">属性规范</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%A1%8C%E9%AB%98%E7%9A%84%E6%B5%8B%E9%87%8F"><span class="toc-number">16.</span> <span class="toc-text">行高的测量</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS-%E4%B8%89%E5%A4%A7%E7%89%B9%E6%80%A7"><span class="toc-number">17.</span> <span class="toc-text">CSS 三大特性</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E5%B1%82%E5%8F%A0%E6%80%A7"><span class="toc-number">17.1.</span> <span class="toc-text">CSS层叠性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E7%BB%A7%E6%89%BF%E6%80%A7"><span class="toc-number">17.2.</span> <span class="toc-text">CSS继承性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">17.3.</span> <span class="toc-text">CSS优先级</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS%E7%89%B9%E6%AE%8A%E6%80%A7%EF%BC%88Specificity%EF%BC%89"><span class="toc-number">17.3.1.</span> <span class="toc-text">CSS特殊性（Specificity）</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS-%E8%83%8C%E6%99%AF-background"><span class="toc-number">18.</span> <span class="toc-text">CSS 背景(background)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87-image"><span class="toc-number">18.1.</span> <span class="toc-text">背景图片(image)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E5%B9%B3%E9%93%BA%EF%BC%88repeat%EF%BC%89"><span class="toc-number">18.2.</span> <span class="toc-text">背景平铺（repeat）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E4%BD%8D%E7%BD%AE-position"><span class="toc-number">18.3.</span> <span class="toc-text">背景位置(position)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E9%99%84%E7%9D%80"><span class="toc-number">18.4.</span> <span class="toc-text">背景附着</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E7%AE%80%E5%86%99"><span class="toc-number">18.5.</span> <span class="toc-text">背景简写</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E9%80%8F%E6%98%8E-CSS3"><span class="toc-number">18.6.</span> <span class="toc-text">背景透明(CSS3)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%BC%E8%88%AA%E6%A0%8F%E6%A1%88%E4%BE%8B"><span class="toc-number">18.7.</span> <span class="toc-text">导航栏案例</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%EF%BC%88CSS%E9%87%8D%E7%82%B9%EF%BC%89"><span class="toc-number">19.</span> <span class="toc-text">盒子模型（CSS重点）</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9C%8B%E9%80%8F%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E7%9A%84%E6%9C%AC%E8%B4%A8"><span class="toc-number">19.1.</span> <span class="toc-text">看透网页布局的本质</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%EF%BC%88Box-Model%EF%BC%89"><span class="toc-number">19.2.</span> <span class="toc-text">盒子模型（Box Model）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E8%BE%B9%E6%A1%86%EF%BC%88border%EF%BC%89"><span class="toc-number">19.3.</span> <span class="toc-text">盒子边框（border）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E8%BE%B9%E6%A1%86%E5%86%99%E6%B3%95%E6%80%BB%E7%BB%93%E8%A1%A8"><span class="toc-number">19.3.1.</span> <span class="toc-text">盒子边框写法总结表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC%E7%9A%84%E7%BB%86%E7%BA%BF%E8%BE%B9%E6%A1%86"><span class="toc-number">19.3.2.</span> <span class="toc-text">表格的细线边框</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%85%E8%BE%B9%E8%B7%9D%EF%BC%88padding%EF%BC%89"><span class="toc-number">19.4.</span> <span class="toc-text">内边距（padding）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E7%9B%92%E5%AD%90%E5%AE%BD%E5%BA%A6%E4%B8%8B%E5%88%97%E6%AD%A3%E7%A1%AE%E7%9A%84%E6%98%AF%EF%BC%88%EF%BC%89"><span class="toc-number">19.4.1.</span> <span class="toc-text">关于盒子宽度下列正确的是（）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3%E5%85%B3%E4%BA%8E%E7%9B%92%E5%AD%90%E9%AB%98%E5%BA%A6%E4%B8%8B%E5%88%97%E6%AD%A3%E7%A1%AE%E7%9A%84%E6%98%AF%EF%BC%88%EF%BC%89"><span class="toc-number">19.4.2.</span> <span class="toc-text">3关于盒子高度下列正确的是（）</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%96%E8%BE%B9%E8%B7%9D%EF%BC%88margin%EF%BC%89"><span class="toc-number">19.5.</span> <span class="toc-text">外边距（margin）</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%AE%9E%E7%8E%B0%E7%9B%92%E5%AD%90%E5%B1%85%E4%B8%AD"><span class="toc-number">19.5.1.</span> <span class="toc-text">外边距实现盒子居中</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E5%AD%97%E7%9B%92%E5%AD%90%E5%B1%85%E4%B8%AD%E5%9B%BE%E7%89%87%E5%92%8C%E8%83%8C%E6%99%AF%E5%8C%BA%E5%88%AB"><span class="toc-number">19.5.2.</span> <span class="toc-text">文字盒子居中图片和背景区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E5%85%83%E7%B4%A0%E7%9A%84%E9%BB%98%E8%AE%A4%E5%86%85%E5%A4%96%E8%BE%B9%E8%B7%9D"><span class="toc-number">19.5.3.</span> <span class="toc-text">清除元素的默认内外边距</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6"><span class="toc-number">19.6.</span> <span class="toc-text">外边距合并</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%B8%E9%82%BB%E5%9D%97%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%A4%96%E8%BE%B9%E8%B7%9D%E7%9A%84%E5%90%88%E5%B9%B6"><span class="toc-number">19.6.1.</span> <span class="toc-text">相邻块元素垂直外边距的合并</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B5%8C%E5%A5%97%E5%9D%97%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%A4%96%E8%BE%B9%E8%B7%9D%E7%9A%84%E5%90%88%E5%B9%B6"><span class="toc-number">19.6.2.</span> <span class="toc-text">嵌套块元素垂直外边距的合并</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#content%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6"><span class="toc-number">19.7.</span> <span class="toc-text">content宽度和高度</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E5%B8%83%E5%B1%80%E7%A8%B3%E5%AE%9A%E6%80%A7"><span class="toc-number">19.8.</span> <span class="toc-text">盒子模型布局稳定性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%86%E8%A7%92%E8%BE%B9%E6%A1%86-CSS3"><span class="toc-number">19.9.</span> <span class="toc-text">圆角边框(CSS3)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1-CSS3"><span class="toc-number">19.10.</span> <span class="toc-text">盒子阴影(CSS3)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%B5%AE%E5%8A%A8-float"><span class="toc-number">20.</span> <span class="toc-text">浮动(float)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%99%AE%E9%80%9A%E6%B5%81-normal-flow"><span class="toc-number">20.1.</span> <span class="toc-text">普通流(normal flow)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%AE%E5%8A%A8-float-1"><span class="toc-number">20.2.</span> <span class="toc-text">浮动(float)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E6%B5%AE%E5%8A%A8%EF%BC%9F"><span class="toc-number">20.3.</span> <span class="toc-text">什么是浮动？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%AE%E5%8A%A8%E8%AF%A6%E7%BB%86%E5%86%85%E5%B9%95%E7%89%B9%E6%80%A7"><span class="toc-number">20.4.</span> <span class="toc-text">浮动详细内幕特性</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%89%88%E5%BF%83%E5%92%8C%E5%B8%83%E5%B1%80%E6%B5%81%E7%A8%8B"><span class="toc-number">21.</span> <span class="toc-text">版心和布局流程</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%83%E5%B1%80%E6%B5%81%E7%A8%8B"><span class="toc-number">21.1.</span> <span class="toc-text">布局流程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%E5%88%97%E5%9B%BA%E5%AE%9A%E5%AE%BD%E5%BA%A6%E4%B8%94%E5%B1%85%E4%B8%AD"><span class="toc-number">21.2.</span> <span class="toc-text">一列固定宽度且居中</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%A4%E5%88%97%E5%B7%A6%E7%AA%84%E5%8F%B3%E5%AE%BD%E5%9E%8B"><span class="toc-number">21.3.</span> <span class="toc-text">两列左窄右宽型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%9A%E6%A0%8F%E5%B9%B3%E5%9D%87%E5%88%86%E5%B8%83%E5%9E%8B"><span class="toc-number">21.4.</span> <span class="toc-text">通栏平均分布型</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="toc-number">22.</span> <span class="toc-text">清除浮动</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="toc-number">22.1.</span> <span class="toc-text">为什么要清除浮动</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E6%9C%AC%E8%B4%A8"><span class="toc-number">22.2.</span> <span class="toc-text">清除浮动本质</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%96%B9%E6%B3%95"><span class="toc-number">22.3.</span> <span class="toc-text">清除浮动的方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A2%9D%E5%A4%96%E6%A0%87%E7%AD%BE%E6%B3%95"><span class="toc-number">22.3.1.</span> <span class="toc-text">额外标签法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%88%B6%E7%BA%A7%E6%B7%BB%E5%8A%A0overflow%E5%B1%9E%E6%80%A7%E6%96%B9%E6%B3%95"><span class="toc-number">22.3.2.</span> <span class="toc-text">父级添加overflow属性方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8after%E4%BC%AA%E5%85%83%E7%B4%A0%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="toc-number">22.3.3.</span> <span class="toc-text">使用after伪元素清除浮动</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8before%E5%92%8Cafter%E5%8F%8C%E4%BC%AA%E5%85%83%E7%B4%A0%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="toc-number">22.3.4.</span> <span class="toc-text">使用before和after双伪元素清除浮动</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Photoshop%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">22.4.</span> <span class="toc-text">Photoshop基本使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#PS%E7%95%8C%E9%9D%A2%E7%BB%84%E6%88%90%EF%BC%9A"><span class="toc-number">22.5.</span> <span class="toc-text">PS界面组成：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E5%B1%82%E6%93%8D%E4%BD%9C-%E9%87%8D%E7%82%B9"><span class="toc-number">22.6.</span> <span class="toc-text">图层操作(重点)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E5%B1%82%E7%BC%96%E7%BB%84"><span class="toc-number">22.7.</span> <span class="toc-text">图层编组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E5%B1%82%E4%B8%8A%E4%B8%8B%E4%BD%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8"><span class="toc-number">22.8.</span> <span class="toc-text">图层上下位置移动</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Photoshop-%E5%88%87%E5%9B%BE"><span class="toc-number">22.9.</span> <span class="toc-text">Photoshop 切图</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%87%E7%89%87%E5%B7%A5%E5%85%B7"><span class="toc-number">22.9.1.</span> <span class="toc-text">切片工具</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BE%85%E5%8A%A9%E7%BA%BF%E5%92%8C%E5%88%87%E7%89%87%E4%BD%BF%E7%94%A8%E5%8F%8A%E6%B8%85%E9%99%A4"><span class="toc-number">22.9.2.</span> <span class="toc-text">辅助线和切片使用及清除</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%87%E5%9B%BE%E6%8F%92%E4%BB%B6"><span class="toc-number">22.9.3.</span> <span class="toc-text">切图插件</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%A1%B9%E7%9B%AE%E6%A1%88%E4%BE%8B%EF%BC%9A-%E4%BA%91%E9%81%93%E9%A1%B5%E9%9D%A2"><span class="toc-number">23.</span> <span class="toc-text">项目案例： 云道页面</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D-position"><span class="toc-number">24.</span> <span class="toc-text">定位(position)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8%E5%AE%9A%E4%BD%8D%EF%BC%9F"><span class="toc-number">24.1.</span> <span class="toc-text">为什么要用定位？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E7%9A%84%E5%AE%9A%E4%BD%8D%E5%B1%9E%E6%80%A7"><span class="toc-number">24.2.</span> <span class="toc-text">元素的定位属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%99%E6%80%81%E5%AE%9A%E4%BD%8D-static"><span class="toc-number">24.3.</span> <span class="toc-text">静态定位(static)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8Drelative-%E8%87%AA%E6%81%8B%E5%9E%8B"><span class="toc-number">24.4.</span> <span class="toc-text">相对定位relative(自恋型)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8Dabsolute-%E6%8B%BC%E7%88%B9%E5%9E%8B"><span class="toc-number">24.5.</span> <span class="toc-text">绝对定位absolute (拼爹型)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%88%B6%E7%BA%A7%E6%B2%A1%E6%9C%89%E5%AE%9A%E4%BD%8D"><span class="toc-number">24.5.1.</span> <span class="toc-text">父级没有定位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%88%B6%E7%BA%A7%E6%9C%89%E5%AE%9A%E4%BD%8D"><span class="toc-number">24.5.2.</span> <span class="toc-text">父级有定位</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%90%E7%BB%9D%E7%88%B6%E7%9B%B8"><span class="toc-number">24.5.3.</span> <span class="toc-text">子绝父相</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E7%9B%92%E5%AD%90%E6%B0%B4%E5%B9%B3-%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD"><span class="toc-number">24.6.</span> <span class="toc-text">绝对定位的盒子水平&#x2F;垂直居中</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8Dfixed-%E8%AE%A4%E6%AD%BB%E7%90%86%E5%9E%8B"><span class="toc-number">24.7.</span> <span class="toc-text">固定定位fixed(认死理型)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%A0%E6%94%BE%E6%AC%A1%E5%BA%8F%EF%BC%88z-index%EF%BC%89"><span class="toc-number">24.8.</span> <span class="toc-text">叠放次序（z-index）</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9B%9B%E7%A7%8D%E5%AE%9A%E4%BD%8D%E6%80%BB%E7%BB%93"><span class="toc-number">25.</span> <span class="toc-text">四种定位总结</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%9A%E4%BD%8D%E6%A8%A1%E5%BC%8F%E8%BD%AC%E6%8D%A2"><span class="toc-number">26.</span> <span class="toc-text">定位模式转换</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E7%9A%84%E6%98%BE%E7%A4%BA%E4%B8%8E%E9%9A%90%E8%97%8F"><span class="toc-number">27.</span> <span class="toc-text">元素的显示与隐藏</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#display-%E6%98%BE%E7%A4%BA"><span class="toc-number">27.1.</span> <span class="toc-text">display 显示</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#visibility-%E5%8F%AF%E8%A7%81%E6%80%A7"><span class="toc-number">27.2.</span> <span class="toc-text">visibility 可见性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#overflow-%E6%BA%A2%E5%87%BA"><span class="toc-number">27.3.</span> <span class="toc-text">overflow 溢出</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E9%AB%98%E7%BA%A7%E6%8A%80%E5%B7%A7"><span class="toc-number">28.</span> <span class="toc-text">CSS高级技巧</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E6%A0%B7%E5%BC%8F"><span class="toc-number">28.1.</span> <span class="toc-text">CSS用户界面样式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%BC%A0%E6%A0%87%E6%A0%B7%E5%BC%8Fcursor"><span class="toc-number">28.1.1.</span> <span class="toc-text">鼠标样式cursor</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BD%AE%E5%BB%93-outline"><span class="toc-number">28.1.2.</span> <span class="toc-text">轮廓 outline</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%98%B2%E6%AD%A2%E6%8B%96%E6%8B%BD%E6%96%87%E6%9C%AC%E5%9F%9Fresize"><span class="toc-number">28.1.3.</span> <span class="toc-text">防止拖拽文本域resize</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#vertical-align-%E5%9E%82%E7%9B%B4%E5%AF%B9%E9%BD%90"><span class="toc-number">28.2.</span> <span class="toc-text">vertical-align 垂直对齐</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E7%89%87%E3%80%81%E8%A1%A8%E5%8D%95%E5%92%8C%E6%96%87%E5%AD%97%E5%AF%B9%E9%BD%90"><span class="toc-number">28.2.1.</span> <span class="toc-text">图片、表单和文字对齐</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8E%BB%E9%99%A4%E5%9B%BE%E7%89%87%E5%BA%95%E4%BE%A7%E7%A9%BA%E7%99%BD%E7%BC%9D%E9%9A%99"><span class="toc-number">28.2.2.</span> <span class="toc-text">去除图片底侧空白缝隙</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%BA%A2%E5%87%BA%E7%9A%84%E6%96%87%E5%AD%97%E9%9A%90%E8%97%8F"><span class="toc-number">29.</span> <span class="toc-text">溢出的文字隐藏</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#word-break-%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C"><span class="toc-number">29.1.</span> <span class="toc-text">word-break:自动换行</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#white-space"><span class="toc-number">29.2.</span> <span class="toc-text">white-space</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#text-overflow-%E6%96%87%E5%AD%97%E6%BA%A2%E5%87%BA"><span class="toc-number">29.3.</span> <span class="toc-text">text-overflow 文字溢出</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS%E7%B2%BE%E7%81%B5%E6%8A%80%E6%9C%AF%EF%BC%88sprite%EF%BC%89-%E5%B0%8F%E5%A6%96%E7%B2%BE-%E9%9B%AA%E7%A2%A7"><span class="toc-number">30.</span> <span class="toc-text">CSS精灵技术（sprite） 小妖精  雪碧</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%B2%BE%E7%81%B5%E6%8A%80%E6%9C%AF%E4%BA%A7%E7%94%9F%E7%9A%84%E8%83%8C%E6%99%AF"><span class="toc-number">30.1.</span> <span class="toc-text">精灵技术产生的背景</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B2%BE%E7%81%B5%E6%8A%80%E6%9C%AF%E6%9C%AC%E8%B4%A8"><span class="toc-number">30.1.1.</span> <span class="toc-text">精灵技术本质</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B2%BE%E7%81%B5%E6%8A%80%E6%9C%AF%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">30.1.2.</span> <span class="toc-text">精灵技术的使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%B6%E4%BD%9C%E7%B2%BE%E7%81%B5%E5%9B%BE"><span class="toc-number">30.1.3.</span> <span class="toc-text">制作精灵图</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%BB%91%E5%8A%A8%E9%97%A8"><span class="toc-number">31.</span> <span class="toc-text">滑动门</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%BB%91%E5%8A%A8%E9%97%A8%E5%87%BA%E7%8E%B0%E7%9A%84%E8%83%8C%E6%99%AF"><span class="toc-number">31.1.</span> <span class="toc-text">滑动门出现的背景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF"><span class="toc-number">31.2.</span> <span class="toc-text">核心技术</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AD%A6%E6%88%90%E5%9C%A8%E7%BA%BF%E7%BB%BC%E5%90%88%E6%A1%88%E4%BE%8B"><span class="toc-number">32.</span> <span class="toc-text">学成在线综合案例</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87"><span class="toc-number">33.</span> <span class="toc-text">字体图标</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E4%BC%98%E7%82%B9"><span class="toc-number">33.1.</span> <span class="toc-text">字体图标优点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E4%BD%BF%E7%94%A8%E6%B5%81%E7%A8%8B"><span class="toc-number">33.2.</span> <span class="toc-text">字体图标使用流程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E8%AE%A1%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87"><span class="toc-number">33.2.1.</span> <span class="toc-text">设计字体图标</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8A%E4%BC%A0%E7%94%9F%E6%88%90%E5%AD%97%E4%BD%93%E5%8C%85"><span class="toc-number">33.2.2.</span> <span class="toc-text">上传生成字体包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8B%E8%BD%BD%E5%85%BC%E5%AE%B9%E5%AD%97%E4%BD%93%E5%8C%85"><span class="toc-number">33.2.3.</span> <span class="toc-text">下载兼容字体包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E4%BD%93%E5%BC%95%E5%85%A5%E5%88%B0HTML"><span class="toc-number">33.2.4.</span> <span class="toc-text">字体引入到HTML</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%AC%AC%E4%B8%80%E6%AD%A5%EF%BC%9A%E5%9C%A8%E6%A0%B7%E5%BC%8F%E9%87%8C%E9%9D%A2%E5%A3%B0%E6%98%8E%E5%AD%97%E4%BD%93%EF%BC%9A-%E5%91%8A%E8%AF%89%E5%88%AB%E4%BA%BA%E6%88%91%E4%BB%AC%E8%87%AA%E5%B7%B1%E5%AE%9A%E4%B9%89%E7%9A%84%E5%AD%97%E4%BD%93"><span class="toc-number">33.2.4.0.1.</span> <span class="toc-text">第一步：在样式里面声明字体： 告诉别人我们自己定义的字体</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%AC%AC%E4%BA%8C%E6%AD%A5%EF%BC%9A%E7%BB%99%E7%9B%92%E5%AD%90%E4%BD%BF%E7%94%A8%E5%AD%97%E4%BD%93"><span class="toc-number">33.2.4.0.2.</span> <span class="toc-text">第二步：给盒子使用字体</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%AC%AC%E4%B8%89%E6%AD%A5%EF%BC%9A%E7%9B%92%E5%AD%90%E9%87%8C%E9%9D%A2%E6%B7%BB%E5%8A%A0%E7%BB%93%E6%9E%84"><span class="toc-number">33.2.4.0.3.</span> <span class="toc-text">第三步：盒子里面添加结构</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%BD%E5%8A%A0%E6%96%B0%E5%9B%BE%E6%A0%87%E5%88%B0%E5%8E%9F%E6%9D%A5%E5%BA%93%E9%87%8C%E9%9D%A2"><span class="toc-number">33.2.5.</span> <span class="toc-text">追加新图标到原来库里面</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link"><span class="toc-number">33.3.</span> <span class="toc-text"> </span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%AC%E4%B8%9C%E9%A1%B9%E7%9B%AE-%E4%B8%80"><span class="toc-number">34.</span> <span class="toc-text">京东项目(一)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%AC%E4%B8%9C%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D"><span class="toc-number">34.1.</span> <span class="toc-text">京东项目介绍</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B9%E7%9B%AE%E8%83%8C%E6%99%AF"><span class="toc-number">34.2.</span> <span class="toc-text">项目背景</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AE%BE%E8%AE%A1%E7%9B%AE%E6%A0%87"><span class="toc-number">34.3.</span> <span class="toc-text">设计目标</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%A0%E7%82%B9%E6%80%9D%E8%80%83"><span class="toc-number">34.4.</span> <span class="toc-text">几点思考</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%AE%E5%BD%95%E8%AF%B4%E6%98%8E"><span class="toc-number">34.5.</span> <span class="toc-text">目录说明</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E7%94%A8%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">34.6.</span> <span class="toc-text">运用知识点</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%95%E5%85%A5ico%E5%9B%BE%E6%A0%87"><span class="toc-number">34.6.1.</span> <span class="toc-text">引入ico图标</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BD%AC%E6%8D%A2ico%E5%9B%BE%E6%A0%87"><span class="toc-number">34.6.2.</span> <span class="toc-text">转换ico图标</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BD%91%E7%AB%99%E4%BC%98%E5%8C%96%E4%B8%89%E5%A4%A7%E6%A0%87%E7%AD%BE"><span class="toc-number">34.6.3.</span> <span class="toc-text">网站优化三大标签</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BD%91%E9%A1%B5title-%E6%A0%87%E9%A2%98"><span class="toc-number">34.6.3.1.</span> <span class="toc-text">网页title 标题</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Description-%E7%BD%91%E7%AB%99%E8%AF%B4%E6%98%8E"><span class="toc-number">34.6.3.2.</span> <span class="toc-text">Description  网站说明</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Keywords-%E5%85%B3%E9%94%AE%E5%AD%97"><span class="toc-number">34.6.3.3.</span> <span class="toc-text">Keywords 关键字</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B6%E9%83%A8%EF%BC%88%E5%BF%AB%E6%8D%B7%E8%8F%9C%E5%8D%95%EF%BC%89%E6%89%80%E7%94%A8%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">34.7.</span> <span class="toc-text">顶部（快捷菜单）所用知识点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#logo-%E5%92%8C%E6%90%9C%E7%B4%A2-header-%E5%8C%BA%E5%9F%9F%E6%89%80%E7%94%A8%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">34.8.</span> <span class="toc-text">logo 和搜索 header 区域所用知识点</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E7%A8%B3%E5%AE%9A%E6%80%A7"><span class="toc-number">34.8.1.</span> <span class="toc-text">网页布局稳定性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%BD%E5%BA%A6%E5%89%A9%E4%BD%99%E6%B3%95%EF%BC%9A"><span class="toc-number">34.8.2.</span> <span class="toc-text">宽度剩余法：</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#nav%E5%AF%BC%E8%88%AA%E6%A0%8F%E6%89%80%E7%94%A8%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">34.9.</span> <span class="toc-text">nav导航栏所用知识点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E5%BA%95%E9%83%A8%E6%89%80%E7%94%A8%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">34.10.</span> <span class="toc-text">页面底部所用知识点</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D%E7%9A%84%E7%9B%92%E5%AD%90%E9%9D%A0%E8%BF%91%E7%89%88%E5%BF%83%E5%8F%B3%E4%BE%A7%E5%AF%B9%E9%BD%90"><span class="toc-number">34.10.1.</span> <span class="toc-text">固定定位的盒子靠近版心右侧对齐</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%AC%E4%B8%9C%E9%A1%B9%E7%9B%AE-%E4%BA%8C"><span class="toc-number">35.</span> <span class="toc-text">京东项目(二)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#nav%E5%AF%BC%E8%88%AA%E6%A0%8F%E6%89%80%E7%94%A8%E7%9F%A5%E8%AF%86%E7%82%B9-1"><span class="toc-number">35.1.</span> <span class="toc-text">nav导航栏所用知识点</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D%E7%9A%84%E7%9B%92%E5%AD%90%E9%9D%A0%E8%BF%91%E7%89%88%E5%BF%83%E5%8F%B3%E4%BE%A7%E5%AF%B9%E9%BD%90-1"><span class="toc-number">35.1.1.</span> <span class="toc-text">固定定位的盒子靠近版心右侧对齐</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%84%A6%E7%82%B9%E5%9B%BE%E9%83%A8%E5%88%86%E6%89%80%E7%94%A8%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">35.2.</span> <span class="toc-text">焦点图部分所用知识点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E5%8D%8A%E9%80%8F%E6%98%8E"><span class="toc-number">35.3.</span> <span class="toc-text">背景半透明</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#BFC-%E5%9D%97%E7%BA%A7%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%B8%8A%E4%B8%8B%E6%96%87"><span class="toc-number">35.4.</span> <span class="toc-text">BFC(块级格式化上下文)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E7%9A%84%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F"><span class="toc-number">35.4.1.</span> <span class="toc-text">元素的显示模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%82%A3%E4%BA%9B%E5%85%83%E7%B4%A0%E4%BC%9A%E5%85%B7%E6%9C%89BFC%E7%9A%84%E6%9D%A1%E4%BB%B6"><span class="toc-number">35.4.2.</span> <span class="toc-text">那些元素会具有BFC的条件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%83%85%E5%86%B5%E4%B8%8B%E5%8F%AF%E4%BB%A5%E8%AE%A9%E5%85%83%E7%B4%A0%E4%BA%A7%E7%94%9FBFC"><span class="toc-number">35.4.3.</span> <span class="toc-text">什么情况下可以让元素产生BFC</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BFC%E5%85%83%E7%B4%A0%E6%89%80%E5%85%B7%E6%9C%89%E7%9A%84%E7%89%B9%E6%80%A7"><span class="toc-number">35.4.4.</span> <span class="toc-text">BFC元素所具有的特性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BFC%E7%9A%84%E4%B8%BB%E8%A6%81%E7%94%A8%E9%80%94"><span class="toc-number">35.4.5.</span> <span class="toc-text">BFC的主要用途</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BFC-%E6%80%BB%E7%BB%93"><span class="toc-number">35.4.6.</span> <span class="toc-text">BFC 总结</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BC%98%E9%9B%85%E9%99%8D%E7%BA%A7%E5%92%8C%E6%B8%90%E8%BF%9B%E5%A2%9E%E5%BC%BA"><span class="toc-number">35.5.</span> <span class="toc-text">优雅降级和渐进增强</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%89%8D%E7%BC%80"><span class="toc-number">35.6.</span> <span class="toc-text">浏览器前缀</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E6%B8%90%E5%8F%98"><span class="toc-number">35.7.</span> <span class="toc-text">背景渐变</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS-W3C-%E7%BB%9F%E4%B8%80%E9%AA%8C%E8%AF%81%E5%B7%A5%E5%85%B7"><span class="toc-number">35.8.</span> <span class="toc-text">CSS W3C 统一验证工具</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML5%E6%96%B0%E6%A0%87%E7%AD%BE%E4%B8%8E%E7%89%B9%E6%80%A7"><span class="toc-number">36.</span> <span class="toc-text">HTML5新标签与特性</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E8%AE%BE%E5%AE%9A"><span class="toc-number">36.1.</span> <span class="toc-text">文档类型设定</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E8%AE%BE%E5%AE%9A"><span class="toc-number">36.2.</span> <span class="toc-text">字符设定</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E6%96%B0%E6%A0%87%E7%AD%BE"><span class="toc-number">36.3.</span> <span class="toc-text">常用新标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B0%E5%A2%9E%E7%9A%84input-type%E5%B1%9E%E6%80%A7%E5%80%BC%EF%BC%9A"><span class="toc-number">36.4.</span> <span class="toc-text">新增的input type属性值：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#-1"><span class="toc-number">36.5.</span> <span class="toc-text"> </span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E6%96%B0%E5%B1%9E%E6%80%A7"><span class="toc-number">36.6.</span> <span class="toc-text">常用新属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%BC%E5%90%88%E6%A1%88%E4%BE%8B"><span class="toc-number">36.7.</span> <span class="toc-text">综合案例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%9A%E5%AA%92%E4%BD%93%E6%A0%87%E7%AD%BE"><span class="toc-number">36.8.</span> <span class="toc-text">多媒体标签</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%9A%E5%AA%92%E4%BD%93-embed%EF%BC%88%E4%BC%9A%E4%BD%BF%E7%94%A8%EF%BC%89"><span class="toc-number">36.8.1.</span> <span class="toc-text">多媒体 embed（会使用）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%9A%E5%AA%92%E4%BD%93-audio"><span class="toc-number">36.8.2.</span> <span class="toc-text">多媒体 audio</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%9A%E5%AA%92%E4%BD%93-video"><span class="toc-number">36.8.3.</span> <span class="toc-text">多媒体 video</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#-2"><span class="toc-number">37.</span> <span class="toc-text"> </span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#CSS3-%E6%96%B0%E5%A2%9E%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">38.</span> <span class="toc-text">CSS3 新增选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%93%E6%9E%84-%E4%BD%8D%E7%BD%AE-%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%88CSS3"><span class="toc-number">38.0.1.</span> <span class="toc-text">结构(位置)伪类选择器（CSS3)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%AE%E6%A0%87%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8-CSS3"><span class="toc-number">38.0.2.</span> <span class="toc-text">目标伪类选择器(CSS3)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">38.1.</span> <span class="toc-text">属性选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%88CSS3"><span class="toc-number">38.2.</span> <span class="toc-text">伪元素选择器（CSS3)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E7%BC%A9%E6%94%BE-CSS3"><span class="toc-number">38.3.</span> <span class="toc-text">背景缩放(CSS3)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%9A%E8%83%8C%E6%99%AF-CSS3"><span class="toc-number">38.4.</span> <span class="toc-text">多背景(CSS3)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%B9%E5%87%B8%E6%96%87%E5%AD%97"><span class="toc-number">38.5.</span> <span class="toc-text">凹凸文字</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS3%E7%9B%92%E6%A8%A1%E5%9E%8B"><span class="toc-number">38.6.</span> <span class="toc-text">CSS3盒模型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#-3"><span class="toc-number">38.7.</span> <span class="toc-text"> </span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%87%E6%B8%A1-CSS3"><span class="toc-number">38.8.</span> <span class="toc-text">过渡(CSS3)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2D%E5%8F%98%E5%BD%A2-CSS3-transform"><span class="toc-number">38.9.</span> <span class="toc-text">2D变形(CSS3) transform</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A7%BB%E5%8A%A8-translate-x-y"><span class="toc-number">38.9.1.</span> <span class="toc-text">移动 translate(x, y)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BC%A9%E6%94%BE-scale-x-y"><span class="toc-number">38.9.2.</span> <span class="toc-text">缩放 scale(x, y)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%97%8B%E8%BD%AC-rotate-deg"><span class="toc-number">38.9.3.</span> <span class="toc-text">旋转 rotate(deg)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#transform-origin%E5%8F%AF%E4%BB%A5%E8%B0%83%E6%95%B4%E5%85%83%E7%B4%A0%E8%BD%AC%E6%8D%A2%E5%8F%98%E5%BD%A2%E7%9A%84%E5%8E%9F%E7%82%B9"><span class="toc-number">38.9.4.</span> <span class="toc-text">transform-origin可以调整元素转换变形的原点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%80%BE%E6%96%9C-skew-deg-deg"><span class="toc-number">38.9.5.</span> <span class="toc-text">倾斜 skew(deg, deg)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3D%E5%8F%98%E5%BD%A2-CSS3-transform"><span class="toc-number">38.10.</span> <span class="toc-text">3D变形(CSS3) transform</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#rotateX"><span class="toc-number">38.10.1.</span> <span class="toc-text">rotateX()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#rotateY"><span class="toc-number">38.10.2.</span> <span class="toc-text">rotateY()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#rotateZ-%7F"><span class="toc-number">38.10.3.</span> <span class="toc-text">rotateZ()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%8F%E8%A7%86-perspective"><span class="toc-number">38.10.4.</span> <span class="toc-text">透视(perspective)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#translateX-x"><span class="toc-number">38.10.5.</span> <span class="toc-text">translateX(x)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#translateY-y"><span class="toc-number">38.10.6.</span> <span class="toc-text">translateY(y)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#translateZ-z"><span class="toc-number">38.10.7.</span> <span class="toc-text">translateZ(z)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#translate3d-x-y-z"><span class="toc-number">38.10.8.</span> <span class="toc-text">translate3d(x,y,z)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%80%E9%97%A8%E6%A1%88%E4%BE%8B"><span class="toc-number">38.10.9.</span> <span class="toc-text">开门案例</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#backface-visibility"><span class="toc-number">38.10.10.</span> <span class="toc-text">backface-visibility</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BF%BB%E8%BD%AC%E7%9B%92%E5%AD%90%E6%A1%88%E4%BE%8B"><span class="toc-number">38.10.11.</span> <span class="toc-text">翻转盒子案例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%A8%E7%94%BB-CSS3-animation"><span class="toc-number">38.11.</span> <span class="toc-text">动画(CSS3) animation</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B0%8F%E6%B1%BD%E8%BD%A6%E6%A1%88%E4%BE%8B"><span class="toc-number">38.11.1.</span> <span class="toc-text">小汽车案例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BC%B8%E7%BC%A9%E5%B8%83%E5%B1%80-CSS3"><span class="toc-number">38.12.</span> <span class="toc-text">伸缩布局(CSS3)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1-CSS3"><span class="toc-number">38.13.</span> <span class="toc-text">文字阴影(CSS3)</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#-4"><span class="toc-number">39.</span> <span class="toc-text"> </span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/web/post/1026.html" title="Vue3学习总结"><img data-lazy-src="/web/img/tab99.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="Vue3学习总结"/></a><div class="content"><a class="title" href="/web/post/1026.html" title="Vue3学习总结">Vue3学习总结</a><time datetime="2022-11-26T16:31:04.834Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/web/post/1666.html" title="个人简历大全 😘"><img data-lazy-src="/web/img/tab4.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="个人简历大全 😘"/></a><div class="content"><a class="title" href="/web/post/1666.html" title="个人简历大全 😘">个人简历大全 😘</a><time datetime="2022-11-26T16:31:04.810Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/web/post/1024.html" title="话费充值平台总结"><img data-lazy-src="/web/img/tab2.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="话费充值平台总结"/></a><div class="content"><a class="title" href="/web/post/1024.html" title="话费充值平台总结">话费充值平台总结</a><time datetime="2022-11-26T16:31:04.798Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/web/post/16106.html" title="填坑录"><img data-lazy-src="/web/img/tab99.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="填坑录"/></a><div class="content"><a class="title" href="/web/post/16106.html" title="填坑录">填坑录</a><time datetime="2022-11-26T16:31:04.787Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/web/post/11314.html" title="uniapp开发,遇坑填坑 😘"><img data-lazy-src="/web/img/tab5.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="uniapp开发,遇坑填坑 😘"/></a><div class="content"><a class="title" href="/web/post/11314.html" title="uniapp开发,遇坑填坑 😘">uniapp开发,遇坑填坑 😘</a><time datetime="2022-11-26T16:31:04.746Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/web/post/16107.html" title="Butterfly启动说明书"><img data-lazy-src="/web/img/tab6.png" onerror="this.onerror=null;this.src='/web/img/404.jpg'" alt="Butterfly启动说明书"/></a><div class="content"><a class="title" href="/web/post/16107.html" title="Butterfly启动说明书">Butterfly启动说明书</a><time datetime="2022-11-26T16:31:04.729Z" title="发表于 2022-11-27 00:31:04">2022-11-27</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('/web/img/tab5.png')"><div id="footer-wrap"><div class="copyright">&copy;2019 - 2022 By ZhuoRu</div><div class="footer_custom_text">I wish you to become your own sun, no need to rely on who's light.<p><a target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a>&nbsp;<a target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a>&nbsp;<a target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a> &nbsp;<a target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Vervel-brightgreen?style=flat&logo=Vercel" title="本站采用双线部署，默认线路托管于Vercel"></a>&nbsp;<a target="_blank" href="https://vercel.com/ "><img src="https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio" title="本站采用双线部署，联通线路托管于Coding"></a>&nbsp;<a target="_blank" href="https://github.com/"><img src="https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub" title="本站项目由Gtihub托管"></a>&nbsp;<a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><a class="icon-V hidden" onclick="switchNightMode()" title="浅色和深色模式转换"><svg width="25" height="25" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon"></use></svg></a><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/web/js/utils.js"></script><script src="/web/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/web/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>(()=>{
  const $countDom = document.getElementById('twikoo-count')
  const init = () => {
    twikoo.init(Object.assign({
      el: '#twikoo-wrap',
      envId: 'https://wechat-delta.vercel.app/',
      region: 'ap-guangzhou'
    }, null))
  }

  const getCount = () => {
    twikoo.getCommentsCount({
      envId: 'https://wechat-delta.vercel.app/',
      region: 'ap-guangzhou',
      urls: [window.location.pathname],
      includeReply: false
    }).then(function (res) {
      $countDom.innerText = res[0].count
    }).catch(function (err) {
      console.error(err);
    });
  }

  const loadTwikoo = (bool = false) => {
    if (typeof twikoo === 'object') {
      init()
      bool && $countDom && setTimeout(getCount,0)
    } else {
      getScript('https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js').then(()=> {
        init()
        bool && $countDom && setTimeout(getCount,0)
      })
    }
  }

  if ('Twikoo' === 'Twikoo' || !true) {
    if (true) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
    else loadTwikoo(true)
  } else {
    window.loadOtherComment = () => {
      loadTwikoo()
    }
  }
})()</script></div><canvas id="universe"></canvas><div class="aplayer no-destroy" data-id="7592292364" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-loop="all" data-lrctype="0"> </div><script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script><script defer src="./js/universe.js"></script><script defer src="./js/sun_moon.js"></script><script defer src="https://fastly.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer data-pjax src="/js/wow_init.js"></script><script defer src="https://fastly.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js"></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})


document.addEventListener('pjax:send', function () {
  typeof preloader === 'object' && preloader.initLoading()
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><script data-pjax>
  function butterfly_swiper_injector_config(){
    var parent_div_git = document.getElementById('recent-posts');
    var item_html = '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;post/1026.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/tab99.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-27</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/1026.html&quot;);" href="javascript:void(0);" alt="">Vue3学习总结</a><div class="blog-slider__text">前端内卷的开始,Vue3开发上手总结</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;post/1026.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;post/1038.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/tab5.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-27</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/1038.html&quot;);" href="javascript:void(0);" alt="">css学习总结</a><div class="blog-slider__text">课程目标:1. 学会使用CSS选择器2. 熟记CSS样式和外观属性3. 熟练掌握CSS各种选择器4. 熟练掌握CSS各种选择器5. 熟练掌握CSS三种显示模式6. 熟练掌握CSS背景属性7. 熟练掌握CSS三大特性8. 熟练掌握CSS盒子模型9. 熟练掌握CSS浮动10.熟练掌握CSS定位11.熟练掌握CSS高级技巧强化CSS</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;post/1038.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;post/16107.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/tab6.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-27</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/16107.html&quot;);" href="javascript:void(0);" alt="">Butterfly启动说明书</a><div class="blog-slider__text">启动说明书</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;post/16107.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" onclick="pjax.loadUrl(&quot;post/2020715.html&quot;);" href="javascript:void(0);" alt=""><img width="48" height="48" src="/img/tab2.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2022-11-27</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/2020715.html&quot;);" href="javascript:void(0);" alt="">html学习总结</a><div class="blog-slider__text">学习目标:了解常用浏览器;掌握WEB标准;理解标签语义化;掌握常用的排版标签;掌握常用的文本格式化图像链接等标签;掌握三种列表标签;掌握表格标签;掌握表格标签;掌握表单标签</div><a class="blog-slider__button" onclick="pjax.loadUrl(&quot;post/2020715.html&quot;);" href="javascript:void(0);" alt="">详情       </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
    console.log('已挂载butterfly_swiper')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'undefined'.split(',');
  var cpage = location.pathname;
  var epage = 'all';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_swiper_injector_config();
  }
  else if (epage === cpage){
    butterfly_swiper_injector_config();
  }
  </script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js"></script><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>